Как повернуть элементы в стиле списка WPF? - PullRequest
Новая
       27

Как повернуть элементы в стиле списка WPF?

1 голос
/ 15 июня 2009

Я хочу сделать фотоальбом WPF ListBox для одного из моих проектов в колледже.

Мне нужно спроектировать стиль DataTemplate / ListBox, чтобы он выглядел как стопка фотографий, т. Е. Верхняя - это элемент, находящийся в фокусе / выбран (см. Схему ниже).

Изображение здесь

alt text

со ссылкой на чертеж,

  • пункт 1) не отображается
  • пункт 2) находится в конце стека
  • пункт 3) в середине 2 и 4
  • пункт 4) в фокусе
  • пункт 5) не отображается

У меня больше всего проблем с вращением и наложением предметов, и самая трудная задача - сфокусировать предмет, который будет отображаться сверху.

Я использую Visual Basic, потому что я еще не освоил C #, поэтому было бы полезно, если бы примеры могли быть на VB или использовать в основном WPF.

1 Ответ

0 голосов
/ 15 июня 2009

Чтобы заставить предметы вращаться, вы должны посмотреть, используя Transforms . В этом случае наиболее уместным является преобразование поворота. Кроме того, для придания ему случайного рассеянного появления мы можем использовать ObjectDataProvider и генерировать наши углы где-то еще.

Я не знаю VB, но единственный C #, вовлеченный в это, довольно прост и должен легко передаваться.

Позволяет просто использовать что-то простое, такое как Цвета, которое можно легко переключить на пути к ресурсам изображения. Здесь у нас есть ObservableCollection наших цветов, а также отдельный класс, который мы будем использовать для генерации углов, все, что он собирается сделать, это вернуть число от 0 до 360, которое мы будем использовать для поворота каждого элемента. 

public partial class Window1 : Window
{
    public Window1()
    {
        InitializeComponent();

        Colors = new ObservableCollection<string>();
        Colors.Add("Red");
        Colors.Add("Blue");
        Colors.Add("Green");
        Colors.Add("Yellow");

        this.DataContext = this;
    }

    public ObservableCollection<string> Colors
    {
        get;
        set;
    }
}

public class AngleService
{
    private static Random rand = new Random();

    public int GetAngle()
    {
        return rand.Next(0, 90);
    }
}

В XAML теперь мы можем создать ресурс, который можно использовать для генерации углов. 

<Window.Resources>
    <local:AngleService x:Key="Local_AngleService" />
    <ObjectDataProvider x:Key="Local_AngleProvider"
                        x:Shared="False"
                        ObjectInstance="{StaticResource Local_AngleService}"
                        MethodName="GetAngle" />
</Window.Resources>

Теперь нам просто нужно создать что-то для отображения наших предметов. Мы можем поместить их в ListBox и добавить шаблон данных, чтобы установить фон для каждого цветового элемента, а также применить RotateTransform. 

<ListBox ItemsSource="{Binding Colors}"
         VerticalContentAlignment="Center"
         HorizontalContentAlignment="Center">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <Border x:Name="uiItemBorder"
                    BorderBrush="Black"
                    BorderThickness="2"
                    CornerRadius="3"
                    Background="{Binding}"
                    Width="50"
                    Height="50">
                <TextBlock Text="{Binding}"
                           VerticalAlignment="Center"
                           HorizontalAlignment="Center" />
                <Border.RenderTransform>
                    <RotateTransform Angle="{Binding Source={StaticResource Local_AngleProvider}}" />
                </Border.RenderTransform>
            </Border>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

Пользовательскому интерфейсу все еще нужно немного поработать, но это должно помочь с ротацией элементов.

...