WrapPanel в виде сетки с изменяемым размером элемента управления в WPF - PullRequest
Новая
       35

WrapPanel в виде сетки с изменяемым размером элемента управления в WPF

0 голосов
/ 11 марта 2011

Я хочу создать сетку с поведением панели обтекания и возможностью изменения размера внутри нее, как я могу это сделать?может быть, проще показать, что я хочу на изображениях:

исходное состояние:

enter image description here

изменить размер элемента управления 1 с направлением внизу справа, поэтому это займет около 2x2 ячеек, затем элемент управления 2 и т. д. изменит свое положение в сетке:

enter image description here

, когда его размер будет изменен, он должен вернуться в исходное состояние.

1 Ответ

1 голос
/ 11 марта 2011

Вам просто нужно создать класс, который расширяет Panel для создания анимации. Вот очень хорошая статья о том, как создать анимацию WrapPanel. Затем вам нужно будет создать DataTemplate для ваших предметов, которые будут использовать Trigger s для роста и сжатия каждого из них. Это также может быть анимировано в Trigger. Panel будет автоматически перемещать другие элементы по мере изменения размера элемента ... в зависимости от кода, который вы указали в методе Panel.ArrangeOverride.

Вам необходимо создать тип данных (класс) для использования в качестве элементов (квадратов). Этому классу понадобится строковое свойство для хранения номера ящика и свойство bool IsLarge, чтобы пользовательский интерфейс мог знать, отображать ли он большой или нет. Я на самом деле не пробовал этот код, но вы могли бы использовать что-то подобное для вашего DataTemplate: 

<DataTemplate DataType="{x:Type YourXmlNameSpace:YourDataType}" x:Key="BoxTemplate">
    <Border Name="Border" BorderBrush="Black" BorderThickness="1" CornerRadius="3" Height="100" Width="100">
        <TextBlock Text="{Binding YourTextProperty}" />
    </Border>
    <DataTemplate.Triggers>
        <DataTrigger Binding="{Binding IsLarge}" Value="True"><!-- (A Boolean property) -->
            <DataTrigger.EnterActions>
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation Storyboard.TargetName="Border" Storyboard.TargetProperty="Height" From="100" To="200" Duration="0:0:0.5" />
                        <DoubleAnimation Storyboard.TargetName="Border" Storyboard.TargetProperty="Width" From="100" To="200" Duration="0:0:0.5" />
                    </Storyboard>
                </BeginStoryboard>
            </DataTrigger.EnterActions>
            <DataTrigger.ExitActions>
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation Storyboard.TargetName="Border" Storyboard.TargetProperty="Height" From="200" To="100" Duration="0:0:0.5" />
                        <DoubleAnimation Storyboard.TargetName="Border" Storyboard.TargetProperty="Width" From="200" To="100" Duration="0:0:0.5" />
                    </Storyboard>
                </BeginStoryboard>
            </DataTrigger.ExitActions>
        </DataTrigger>
    </DataTemplate.Triggers>
</DataTemplate>

Затем вы связываете DataTemplate с каждым ListBoxItem следующим образом: 

<Style TargetType="{x:Type ListBoxItem}" x:Key="BoxStyle">
    <Setter Property="ContentTemplate" Value="{StaticResource BoxTemplate}" />
    <Style.Resources><!-- this removes the default blue selection colour -->
        <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="#00FFFAB0" />
        <SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}" Color="#00FFFAB0" />
        <SolidColorBrush x:Key="{x:Static SystemColors.HighlightTextBrushKey}" Color="Black" />
        <SolidColorBrush x:Key="{x:Static SystemColors.ControlTextBrushKey}" Color="Black" />
    </Style.Resources>
    <Style.Triggers><!-- comment this section out, or declare a SelectedBoxTemplate DataTemplate -->
        <Trigger Property="IsSelected" Value="True">
            <Setter Property="ContentTemplate" Value="{StaticResource SelectedBoxTemplate}" />
        </Trigger>
    </Style.Triggers>
</Style>

Я не определил ни одного SelectedBoxTemplate DataTemplate, но вы можете объявить другой, который будет активирован с помощью Style.Trigger.

Тогда, наконец, вы объявите свой ListBox примерно так: 

<ListBox ItemsSource="{Binding YourCollection}" ItemContainerStyle="{StaticResource BoxStyle}">
    <ListBox.ItemsPanel>
        <ItemsPanelTemplate>
            <YourXmlNameSpace:YourAnimationPanel />
        </ItemsPanelTemplate>
    </ListBox.ItemsPanel>
</ListBox>
...