XAML UserControl - 基于触发器设置背景

时间:2011-09-29 10:10:34

标签: xaml binding triggers background expander

我有一个包含扩展器的UserControl:

<UserControl x:Class="Client.DevicesExpander"
             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="300" d:DesignWidth="300"
             x:Name="devicesExpander" >

    <Expander Margin="1" Name="expander" FontSize="11" BorderThickness="1" BorderBrush="DarkRed" Foreground="Black" Header="{Binding ElementName=devicesExpander, Path=Header}" FontWeight="Bold" MouseDoubleClick="Expander_MouseDoubleClick" Expanded="Expander_Expanded" IsExpanded="{Binding ElementName=devicesExpander, Path=IsExpanded}" Background="{Binding ElementName=devicesExpander, Path=Background}">
        <StackPanel Name="_devicesPanel">
            <ListBox BorderThickness="0,1,0,0"  Name="_devicesList" FontWeight="Normal" MouseDoubleClick="DevicesList_MouseDoubleClick" Background="{Binding ElementName=devicesExpander, Path=Background}" />
        </StackPanel>
        <Expander.Style>
            <Style TargetType="{x:Type Expander}">
                <Style.Triggers>
                    <DataTrigger Binding="{Binding ElementName=devicesExpander, Path=IsExpanded}" Value="True">
                        <Setter Property="Background" Value="White" />
                    </DataTrigger>
                </Style.Triggers>
            </Style>
            </Expander.Style>
    </Expander>
</UserControl>

Ans基本上我想做的就是根据UserControl(或Expander)的IsExpanded更改Expander和StackPanel的背景颜色。

我在控件中添加了三个Dependancy Properties:

    public static readonly DependencyProperty HeaderProperty = DependencyProperty.Register("Header", typeof(string), typeof(DevicesExpander));
    public static readonly DependencyProperty IsExpandedProperty = DependencyProperty.Register("IsExpanded", typeof(bool), typeof(DevicesExpander));
    public static readonly DependencyProperty BackgroundProperty = DependencyProperty.Register("Background", typeof(System.Windows.Media.Brush), typeof(DevicesExpander));

但我的代码不起作用。当从放置usercontrol的窗口中检查属性时,usercontrol的IsExpanded属性确实有效(当扩展器扩展时)。

如何根据UserControl.IsExpanded属性更改Expander的背景颜色?

谢谢!

编辑: 我在此期间完成了以下工作:

<UserControl.Resources>
        <Style TargetType="{x:Type UserControl}">
            <Style.Triggers>
                <DataTrigger Binding="{Binding ElementName=devicesExpander, Path=IsExpanded}" Value="True">
                    <Setter Property="Background" Value="White" />
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </UserControl.Resources>

    <Expander Margin="1" Name="expander" FontSize="11" BorderThickness="1" BorderBrush="DarkRed" Foreground="Black" Header="{Binding ElementName=devicesExpander, Path=Header}" FontWeight="Bold" MouseDoubleClick="Expander_MouseDoubleClick" Expanded="Expander_Expanded" IsExpanded="{Binding ElementName=devicesExpander, Path=IsExpanded}" Background="Transparent">
        <StackPanel Name="_devicesPanel">
            <ListBox BorderThickness="0,1,0,0"  Name="_devicesList" FontWeight="Normal" MouseDoubleClick="DevicesList_MouseDoubleClick" Background="Transparent" />
        </StackPanel>
    </Expander>

并删除了BackgroundProperty依赖属性。我实际上认为这可行,但唉......

2 个答案:

答案 0 :(得分:1)

我设法解决了我的问题。这里有解决方案(只显示基本代码)......

我的依赖属性创建如下:

public static readonly DependencyProperty IsExpandedProperty = DependencyProperty.Register("IsExpanded", typeof(bool), typeof(DevicesExpander));

public bool IsExpanded
{
    get { return (bool)GetValue(IsExpandedProperty); }
    set { SetValue(IsExpandedProperty, value); }
}

我的XAML是:

<UserControl x:Class="TestApp.DevicesExpander"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             Name="devicesExpander">

    <Expander>
        <Expander.Style>
            <Style TargetType="Expander">
                <Style.Triggers>
                    <DataTrigger Binding="{Binding ElementName=devicesExpander, Path=IsExpanded}" Value="True">
                        <Setter Property="Background" Value="Black" />
                    </DataTrigger>
                    <DataTrigger Binding="{Binding ElementName=devicesExpander, Path=IsExpanded}" Value="False">
                        <Setter Property="Background" Value="Red" />
                    </DataTrigger>
                </Style.Triggers>
            </Style>
        </Expander.Style>
    </Expander>
</UserControl>

最后的解决方案是从元素中删除Backgroud属性,并为IsExpanded = True和IsExpanded = False指定DataTrigger。因此,在元素属性中指定的Background属性似乎会覆盖触发器尝试设置的任何内容。

希望这有助于某人!

答案 1 :(得分:0)

这是另一个解决同一问题的方法,这次是使用IValueConverter ...

我的XAML:

  <UserControl.Resources>
        <local:BackgroundConverter x:Key="backgroundConvertor" />
    </UserControl.Resources>

    <Expander>
        <Expander.Style>
            <Style TargetType="Expander">
                <Setter Property="Background" Value="{Binding ElementName=devicesEntry, Path=IsExpanded, Converter={StaticResource backgroundConvertor}}" />
            </Style>
        </Expander.Style>
    </Expander>

和我的代码转换器:

public class BackgroundConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return (bool)value ? "White" : "Transparent";
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        string color = value as string;

        if (color == "White")
            return true;

        return false;
    }
}

我认为虽然我更喜欢XAML解决方案,但IValueConverter选项确实可以更好地读取XAML ...

(DependancyProperty仍以完全相同的方式创建)