Развернуть элемент WrapPanel поверх других элементов в WPF - PullRequest
Новая
       37

Развернуть элемент WrapPanel поверх других элементов в WPF

0 голосов
/ 11 октября 2018

Я пытаюсь создать список элементов, в котором элементы могут быть расширены по другим элементам при наведении / щелчке / некотором другом событии.

В настоящее время я использую WrapPanel и привязываю Items к ItemsSource элемента ItemsControl.имущество.Элементы выглядят хорошо, и WrapPanel хорошо работает, когда изменяется его размер, но я не могу придумать, каким образом элемент сможет расширяться за пределы своих первоначальных границ, по сравнению с другими элементами в WrapPanel.

Возможно изображениесделает это понятнее.

Вот как выглядят предметы:

enter image description here

И это то, чего я хочу достичь при наведении / нажатии на элемент:

enter image description here

Конечно, элемент должен вернуться к своему первоначальному размеру, когда мышь его покидает.

Это код, который я использую:

СПИСОК: 

    <ScrollViewer VerticalScrollBarVisibility="Auto">
        <ItemsControl ItemsSource="{Binding Items}">
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <local:WorkoutsListItem/>
                </DataTemplate>
            </ItemsControl.ItemTemplate>

            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <WrapPanel/>
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
        </ItemsControl>
    </ScrollViewer>

ПУНКТ: 

    <Border  Style="{StaticResource WorkoutsButton}" Height="150" Width="250">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
                <RowDefinition Height="60"/>
            </Grid.RowDefinitions>
            <Image Grid.Row="0" Height="70" Width="70"/>
            <Grid  Grid.Row="1">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="Auto"/>
                </Grid.ColumnDefinitions>
                <StackPanel Grid.Column="0" Orientation="Horizontal">
                    <TextBlock [...]/>
                    <TextBlock [...]/>
                </StackPanel>
                <TextBlock Grid.Column="1" [...]/>
                <StackPanel Grid.Column="2" Orientation="Horizontal">
                    <TextBlock [...]/>
                    <TextBlock [...]"/>
                </StackPanel>
            </Grid>
        </Grid>
    </Border>

Спасибо за помощь!

1 Ответ

0 голосов
/ 11 октября 2018

Я предлагаю вам использовать Expander с отрицательным Margin.С этим аккуратным маленьким трюком UIElement не меняет свой размер, но может отображать содержимое снаружи.

Следующее Style должно работать для вас 

<ScrollViewer VerticalScrollBarVisibility="Auto">
    <ItemsControl ItemsSource="{Binding Images}">
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <!-- Bind IsExpanded to MouseOver to expand it automatically -->
                <Expander Width="100" IsExpanded="{Binding Path=IsMouseOver, RelativeSource={RelativeSource Self}, Mode=OneWay}">
                    <!-- Normal View -->
                    <Expander.Header>
                        <StackPanel>
                            <Image Height="70" Width="70"/>
                            <Label Content="Title"/>
                        </StackPanel>
                    </Expander.Header>
                    <!-- Details displayed underneath, with same width as the preview -->
                    <StackPanel Height="80" Background="LightGray" Width="{Binding Path=Width, RelativeSource={RelativeSource AncestorType={x:Type Expander}}}">
                        <Label Content="DETAILS"/>
                        <TextBlock Text="Lorem ipsum dolor sit amet" TextWrapping="Wrap"/>
                    </StackPanel>
                    <!-- Set negative Margin to render Details outside of the Boundaries -->
                    <Expander.Style>
                        <Style TargetType="{x:Type Expander}">
                            <Style.Triggers>
                                <Trigger Property="IsMouseOver" Value="True">
                                    <!-- Note: The Margin must be the same as the Detail Height -->
                                    <Setter Property="Margin" Value="0,0,0,-80"/>
                                </Trigger>
                            </Style.Triggers>
                        </Style>
                    </Expander.Style>
                </Expander>                      
            </DataTemplate>
        </ItemsControl.ItemTemplate>

        <!-- Bring Item to front when Mouse is over it -->
        <ItemsControl.ItemContainerStyle>
            <Style TargetType="{x:Type ContentPresenter}">
                <Style.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="Panel.ZIndex" Value="1" />
                    </Trigger>
                </Style.Triggers>
            </Style>
        </ItemsControl.ItemContainerStyle>

        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <WrapPanel/>
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
    </ItemsControl>
</ScrollViewer>
...