首页 > 解决方案 > DataTrigger 中的引用按钮名称

问题描述

我有一个样式按钮如下:

<Style x:Key="btnDefaultOperationImage" TargetType="{x:Type Button}">
    <Setter Property="Foreground" Value="White"/>
    <Setter Property="HorizontalAlignment" Value="Stretch"/>
    <Setter Property="VerticalAlignment" Value="Stretch"/>
    <Setter Property="VerticalContentAlignment" Value="Center"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <Border Name="brdMenu"
                        BorderThickness="0"
                        Padding="4,2"
                        BorderBrush="White"
                        Background="#20000000">
                    <StackPanel>
                        <ContentPresenter x:Name="ButtonContentPresenter" VerticalAlignment="Center" HorizontalAlignment="Center">
                            <ContentPresenter.Resources>
                                <Style TargetType="TextBlock">
                                    <Setter Property="TextAlignment" Value="Center" />
                                </Style>
                            </ContentPresenter.Resources>
                        </ContentPresenter>
                        <Image>
                            <Image.Style>
                                <Style TargetType="{x:Type Image}">
                                    <Setter Property="Source" Value="/Images/Icons/CourtHearing.png" />
                                    <Style.Triggers>
                                        <DataTrigger Binding="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Button}}, Path=Name}" Value="btnCases">
                                            <Setter Property="Source" Value="/Images/Icons/Cases.png"/>
                                        </DataTrigger>
                                    </Style.Triggers>
                                </Style>
                            </Image.Style>
                        </Image>
                    </StackPanel>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter TargetName="brdMenu" Property="BorderBrush" Value="#F2826A"/>
                        <Setter TargetName="brdMenu" Property="Background" Value="#30000000"/>
                        <Setter TargetName="brdMenu" Property="TextElement.FontSize" Value="25"/>
                        <Setter TargetName="brdMenu" Property="TextElement.Foreground" Value="AntiqueWhite"/>
                    </Trigger>
                    <Trigger Property="IsPressed" Value="True">
                        <Setter TargetName="brdMenu" Property="BorderBrush" Value="OrangeRed" />
                        <Setter TargetName="brdMenu" Property="Background" Value="White" />
                    </Trigger>
                    <Trigger Property="IsEnabled" Value="false">
                        <!--<Setter TargetName="brdMenu" Property="Background" Value="{StaticResource DisabledBackgroundBrush}" />-->
                        <Setter TargetName="brdMenu" Property="Background" Value="#f9f9f9" />
                        <Setter TargetName="brdMenu" Property="Opacity" Value="0.3" />
                        <Setter Property="Foreground" Value="Black" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

我想在许多按钮上使用这种样式,但是每个按钮都会根据其名称具有不同的图像,例如:

我想知道是否可以DataTrigger用来解决这个问题,我试过了

<DataTrigger Binding="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Button}}, Path=Name}" Value="btnCases">

但它不起作用。

标签: c#wpfxaml

解决方案


我想你要的是这样的东西。您需要做的是bindimage source对每个button. 我tag在这个例子中使用了这个属性,但是你可以使用任何东西 -attached property等等ViewModel property

<Window.Resources>
    <Style x:Key="btnDefaultOperationImage" TargetType="{x:Type Button}">
        <Setter Property="Foreground" Value="White"/>
        <Setter Property="HorizontalAlignment" Value="Stretch"/>
        <Setter Property="VerticalAlignment" Value="Stretch"/>
        <Setter Property="VerticalContentAlignment" Value="Center"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Border Name="brdMenu"
                    BorderThickness="0"
                    Padding="4,2"
                    BorderBrush="White"
                    Background="#20000000">
                        <StackPanel>
                            <ContentPresenter x:Name="ButtonContentPresenter" VerticalAlignment="Center" HorizontalAlignment="Center">
                                <ContentPresenter.Resources>
                                    <Style TargetType="TextBlock">
                                        <Setter Property="TextAlignment" Value="Center" />
                                    </Style>
                                </ContentPresenter.Resources>
                            </ContentPresenter>
                            <Image>
                                <Image.Style>
                                    <Style TargetType="{x:Type Image}">
                                        <Setter Property="Source" Value="{Binding Tag, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Button}}}" />
                                    </Style>
                                </Image.Style>
                            </Image>
                        </StackPanel>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter TargetName="brdMenu" Property="BorderBrush" Value="#F2826A"/>
                            <Setter TargetName="brdMenu" Property="Background" Value="#30000000"/>
                            <Setter TargetName="brdMenu" Property="TextElement.FontSize" Value="25"/>
                            <Setter TargetName="brdMenu" Property="TextElement.Foreground" Value="AntiqueWhite"/>
                        </Trigger>
                        <Trigger Property="IsPressed" Value="True">
                            <Setter TargetName="brdMenu" Property="BorderBrush" Value="OrangeRed" />
                            <Setter TargetName="brdMenu" Property="Background" Value="White" />
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="false">
                            <!--<Setter TargetName="brdMenu" Property="Background" Value="{StaticResource DisabledBackgroundBrush}" />-->
                            <Setter TargetName="brdMenu" Property="Background" Value="#f9f9f9" />
                            <Setter TargetName="brdMenu" Property="Opacity" Value="0.3" />
                            <Setter Property="Foreground" Value="Black" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>
<Grid>
    <StackPanel>
        <Button Style="{StaticResource btnDefaultOperationImage}" Tag="..\image1.png"/>
        <Button Style="{StaticResource btnDefaultOperationImage}" Tag="..\image2.png"/>
    </StackPanel>
</Grid>

推荐阅读