Question

有一个非常简单的问题，但似乎我无法在互联网上找到答案。可能是因为我没有找对地方。

我有一个带有自定义枚举类型的DependencyProperty的用户控件。在XAML中，我想根据枚举类型的值显示/隐藏元素。我尝试用DataTriggers做到这一点，但我没能让它工作。

<UserControl x:Class="WpfApplication1.DisplayIcon"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
         mc:Ignorable="d" 
         d:DesignHeight="50" d:DesignWidth="50"
         x:Name="control">
<UserControl.Resources>
    <Style TargetType="Ellipse">
        <Setter Property="Visibility" Value="Collapsed"/>
        <Style.Triggers>
            <DataTrigger Value="Ellipse" Binding="{Binding MyIconType, ElementName=control}">
                <Setter Property="Visibility" Value="Visible"/>
            </DataTrigger>
        </Style.Triggers>
    </Style>

    <Style TargetType="Rectangle">
        <Setter Property="Visibility" Value="Collapsed"/>
        <Style.Triggers>
            <DataTrigger Value="Rectangle" Binding="{Binding MyIconType, ElementName=control}">
                <Setter Property="Visibility" Value="Visible"/>
            </DataTrigger>
        </Style.Triggers>
    </Style>

</UserControl.Resources>
<Grid>
    <Ellipse x:Name="el1" Fill="Red" Width="30" Height="30" />
    <Rectangle x:Name="el2" Fill="Green" Width="20" Height="20" /> 
    <TextBlock Text="{Binding MyIconType, ElementName=control}" Margin="0,40,0,0"/>
</Grid></UserControl>

我的代码背后是这样的：

public enum IconType
{
    Ellipse,
    Rectangle
}
public partial class DisplayIcon : UserControl
{
    public DisplayIcon()
    {
        InitializeComponent();
    }

    public IconType MyIconType
    {
        get { return (IconType)GetValue(MyIconTypeProperty); }
        set { SetValue(MyIconTypeProperty, value); }
    }

    // Using a DependencyProperty as the backing store for MyIconType.  This enables animation, styling, binding, etc...
    public static readonly DependencyProperty MyIconTypeProperty =
        DependencyProperty.Register("MyIconType", typeof(IconType), typeof(DisplayIcon), new PropertyMetadata(IconType.Ellipse));

}

有人可以帮助我吗？

谢谢，

吉姆

Answer 1

您可以为每个元素创建Style并在那里定义触发器：

<UserControl x:Class="WpfApplication1.DisplayIcon"
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
     mc:Ignorable="d" 
     d:DesignHeight="50" d:DesignWidth="50"
     x:Name="control">

<UserControl.Resources>

    <Style TargetType="Ellipse">
        <Style.Triggers>
            <DataTrigger Value="Rectangle" Binding="{Binding MyIconType, ElementName=control}">
                <Setter Property="Visibility" Value="Collapsed"/>
            </DataTrigger>
        </Style.Triggers>
    </Style>

    <Style TargetType="Rectangle">
        <Style.Triggers>
            <DataTrigger Value="Ellipse" Binding="{Binding MyIconType, ElementName=control}">
                <Setter Property="Visibility" Value="Collapsed"/>
            </DataTrigger>
        </Style.Triggers>
    </Style>

</UserControl.Resources>

<Grid>
    <Ellipse x:Name="el1" Fill="Red" Width="20" Height="20"/>
    <Rectangle Grid.Row="1" x:Name="el2" Fill="Green" Width="20" Height="20"/>
</Grid>

修改

事实上，反转Visibility逻辑可能更有意义。这样您就可以添加形状而无需修改代码：

<UserControl x:Class="WpfApplication1.DisplayIcon" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" mc:Ignorable="d" d:DesignHeight="50" d:DesignWidth="50" x:Name="control"> <UserControl.Resources> <Style TargetType="Ellipse"> <Setter Property="Visibility" Value="Collapsed"/> <Style.Triggers> <DataTrigger Value="Ellipse" Binding="{Binding MyIconType, ElementName=control}"> <Setter Property="Visibility" Value="Visible"/> </DataTrigger> </Style.Triggers> </Style> <Style TargetType="Rectangle"> <Setter Property="Visibility" Value="Collapsed"/> <Style.Triggers> <DataTrigger Value="Rectangle" Binding="{Binding MyIconType, ElementName=control}"> <Setter Property="Visibility" Value="Visible"/> </DataTrigger> </Style.Triggers> </Style> </UserControl.Resources> <Grid> <Ellipse x:Name="el1" Fill="Red" Width="20" Height="20"/> <Rectangle x:Name="el2" Fill="Green" Width="20" Height="20"/> </Grid>

基于DependencyProperty在UserControl中触发触发器

1 个答案: