StackPanel 在鼠标悬停时“可见”可见性

Question

另一个有两个堆栈面板。 因此第一个堆栈面板始终可见并且具有条形码。 我希望第二个堆栈面板 x:Name="Verborgen" 的可见性为“折叠”，当鼠标悬停时具有可见性“可见”，现在可见的堆栈面板需要有 z-Index 9999。

这是该项目的保管箱链接： https://www.dropbox.com/s/8w8horclhfwy4ub/Oefening2.zip

当我将此代码添加到 Window.Resources 时它不起作用，但这正是我想要的：

        <ControlTemplate x:Key="panelControl" TargetType="StackPanel">
            <ControlTemplate.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter TargetName="Verborgen" Property="Visibility" Value="Visible"/>
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>

This is the xaml
<Window.Resources>     
        <model:LocationType x:Key="LocationTypeInstance"/>
        <DataTemplate x:Key="WastebinTemplate">
            <ContentControl map:MapLayer.Position="{Binding GeoLocation}">
                <ContentControl.Content>
                    <StackPanel Name="form"> 
                            <TextBlock Background="{StaticResource Blue}" Text="{Binding Barcode}"/>
                        <StackPanel Visibility="Collapsed" x:Name="Verborgen" Background="{StaticResource Orange}">                             
                            <Button Name="btnRemove" Content="Remove wastebin" Click="btnRemove_Click">
                            </Button>
                            <Label>Adres</Label>
                            <TextBox Name="txbAdres" Text="{Binding Address}"/>
                            <Label>Location type</Label>
                            <ComboBox ItemsSource="{Binding Source={StaticResource LocationTypeInstance}, Path=LocationTypes}" 
                                      DisplayMemberPath="Description" SelectedItem="{Binding LocationType}" SelectedValuePath="ID" SelectedValue="{Binding LocationType.ID}" />
                            <Label>Capaciteit</Label>
                            <Slider Minimum="0" Maximum="100" TickFrequency="10" Value="{Binding Capacity}"></Slider>
                        </StackPanel>
                    </StackPanel>
                </ContentControl.Content>
            </ContentControl>
        </DataTemplate>
    </Window.Resources>

Answer 1

试试这个：

<Window.Resources>
    <Style x:Key="Expandable" TargetType="StackPanel">
        <Setter Property="Visibility" Value="Collapsed" />
        <Style.Triggers>
            <DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType=StackPanel}, Path=IsMouseOver}" Value="True" >
                <Setter Property="Visibility" Value="Visible" />
            </DataTrigger>
        </Style.Triggers>
    </Style>

    <model:LocationType x:Key="LocationTypeInstance"/>
    <DataTemplate x:Key="WastebinTemplate">
        <ContentControl>
            <ContentControl.Content>
                <StackPanel Name="form">
                        <TextBlock Background="{StaticResource Blue}" Text="{Binding Barcode}"/>
                    <StackPanel x:Name="Verborgen" Background="{StaticResource Orange}" Style="{StaticResource Expandable}">
                        <Button Name="btnRemove" Content="Remove wastebin" Click="btnRemove_Click">
                        </Button>
                        <Label>Adres</Label>
                        <TextBox Name="txbAdres" Text="{Binding Address}"/>
                        <Label>Location type</Label>
                        <ComboBox ItemsSource="{Binding Source={StaticResource LocationTypeInstance}, Path=LocationTypes}" 
                                    DisplayMemberPath="Description" SelectedItem="{Binding LocationType}" SelectedValuePath="ID" SelectedValue="{Binding LocationType.ID}" />
                        <Label>Capaciteit</Label>
                        <Slider Minimum="0" Maximum="100" TickFrequency="10" Value="{Binding Capacity}"></Slider>
                    </StackPanel>
                </StackPanel>
            </ContentControl.Content>
        </ContentControl>
    </DataTemplate>

</Window.Resources>