WPF在ListView中更改UserControl的样式

时间:2015-05-15 08:01:37

标签: wpf xaml

我在设置UserContorl的样式时遇到问题。我在文件中定义了名为BusyIndi​​cator的UserControl。下面是xaml。

<UserControl x:Class="Foo.Client.UI.SVGs.BusyIndicator"
             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"
             DataContext="{Binding RelativeSource={RelativeSource Self}}"
             >
    <UserControl.Template>
        <ControlTemplate>
            <Border Width="{Binding Width}" Height="{Binding Height}" Visibility="{TemplateBinding Control.Visibility}">
                <Canvas Width="{Binding Width}" Height="{Binding Height}"  Visibility="{TemplateBinding  Control.Visibility}">
                    <Path Fill="{Binding Foreground}"
                          Height="25"
                          Width="25"
                          Data="M20.519,4.617c-3.262-3.111-7.821-3.965-12.03-2.236 c-4.282,1.76-6.895,5.654-6.863,10.227l3.658-0.025C5.263,9.51,7.017,6.892,9.894,5.71c2.81-1.154,5.85-0.598,8.037,1.456 l-1.395,1.376h5.39V3.227L20.519,4.617z"/>
                </Canvas>
            </Border>
        </ControlTemplate>
    </UserControl.Template>
</UserControl>

然后我引用UserControl并在ListView中使用它。 ListView绑定的对象具有名为Status的属性。当状态设置为&#34;正在运行&#34;时,我想要更改样式。当我运行它时,Button被隐藏,所以我知道Status属性正在通知。但是svg:BusyIndi​​cator控件保持不变。

<UserControl x:Class="Foo.Views.Screens.CollectionResultsView"
                 AutomationProperties.AutomationId="CollectionResultsView"
                 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"  
                 mc:Ignorable="d"
                 xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
                 xmlns:svg="clr-namespace:Foo.Client.UI.SVGs;assembly=Foo.Client.UI" 
                 d:DesignWidth="700">
    <ListView ItemsSource="{Binding TargetStatusView}">
        <StackPanel>
            <Button>
                <TextBlock Text="X"></TextBlock>
                <Button.Style>
                    <Style TargetType="Button">
                        <Setter Property="Visibility" Value="Visible" />
                        <Style.Triggers>
                            <DataTrigger Binding="{Binding Status}" Value="Running">
                                <Setter Property="Visibility"  Value="Hidden" />
                            </DataTrigger>
                        </Style.Triggers>
                    </Style>
                </Button.Style>
            </Button>
            <svg:BusyIndicator Width="25" Height="25">
                <svg:BusyIndicator.Style>
                    <Style TargetType="svg:BusyIndicator">
                        <Setter Property="Visibility" Value="Visible" />
                        <Style.Triggers>
                            <DataTrigger Binding="{Binding Status}" Value="Running">
                                <Setter Property="Visibility" Value="Hidden"/>
                            </DataTrigger>
                        </Style.Triggers>
                    </Style>
                </UserControl.Style>
            </svg:BusyIndicator>
        </StackPanel>
    </ListView>
</UserControl>

我也尝试将TargetType更改为UserControl,但这也没有。

<svg:BusyIndicator Width="25" Height="25">
    <UserControl.Style>
        <Style TargetType="UserControl">
            <Setter Property="Visibility" Value="Visible" />
            <Style.Triggers>
                <DataTrigger Binding="{Binding Status}" Value="Running">
                    <Setter Property="Visibility" Value="Hidden"/>
                    <Setter Property="Foreground" Value="White" />
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </UserControl.Style>
</svg:BusyIndicator>

设置<svg:BusyIndicator Width="25" Height="25" Visibility="Hidden">确实有效,但如果我将<Setter Property="Visibility" Value="Hidden" />添加到<Style.Triggers>上方的样式中,则无效。

我还尝试了其他属性,例如OpacityHeight,但没有成功。

我错过了什么?

1 个答案:

答案 0 :(得分:0)

问题在于我们定义BusyIndi​​cator控件的方式。因为DataContext设置为{Binding RelativeSource={RelativeSource Self}}。有了这个,当它在ListView中使用时,上下文是控件本身而不是绑定到ListView的数据。所以Binding="{Binding Status}"确实有效,因为BusyIndi​​cator用户控件没有Status属性。

我们更新了下面的控件并且有效。

<UserControl x:Class="Foo.Client.UI.SVGs.BusyIndicator"
             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">
    <Canvas>
                <Path Fill="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl}}, Path=Foreground}" 
                          Data="M20.519,4.617c-3.262-3.111-7.821-3.965-12.03-2.236 c-4.282,1.76-6.895,5.654-6.863,10.227l3.658-0.025C5.263,9.51,7.017,6.892,9.894,5.71c2.81-1.154,5.85-0.598,8.037,1.456 l-1.395,1.376h5.39V3.227L20.519,4.617z">
                </Path>
                <Path Fill="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl}}, Path=Foreground}" Data="M4.733,20.634c3.26,3.111,7.82,3.964,12.03,2.234c4.281-1.76,6.894-5.652,6.862-10.227l-3.658,0.025c0.021,3.073-1.733,5.69-4.61,6.872c-2.808,1.155-5.85,0.598-8.037-1.457l1.396-1.375H3.324v5.315L4.733,20.634z" >
                </Path>
    </Canvas>       
</UserControl>