C# WPF 使用带有 Button.Tag 的多图像源 ControlTemplate答案

【问题标题】：C# WPF Use multi image source ControlTemplate with Button.TagC# WPF 使用带有 Button.Tag 的多图像源 ControlTemplate
【发布时间】：2019-10-10 08:20:54
【问题描述】：

我在 Button 中使用 ControlTemplate 时遇到问题。我想创建一个带有图像和文本的按钮。当鼠标悬停在按钮上时，图像会发生变化。我使用 Button.Tag 来传递图像源。但我需要传递两个图像源。是否可以在 Button.Tag 中创建图像源列表并在 ControlTemplate 中选择？谢谢你。

<Style x:Key="myBtnStyle" TargetType="{x:Type Button}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <StackPanel Orientation="Horizontal">
                    <Image x:Name="myImg" Source="{TemplateBinding Tag[0]}" HorizontalAlignment="Left"/>
                    <ContentPresenter Content="{TemplateBinding Content}" HorizontalAlignment="Left"/>
                </StackPanel>

                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter TargetName="myImg" Property="Source" Value="{TemplateBinding Tag[1]}" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

<Button Content="Click" Style="{StaticResource myBtnStyle}">
    <Button.Tag>
      <ImageSource>/img/usb_white.png</ImageSource>
      <ImageSource>/img/usb_gray.png</ImageSource>
    </Button.Tag>
</Button>

【问题讨论】：

请不要使用Tag。它没有描述性名称（因此它会令其他开发人员感到困惑）并且您无法控制它的数据类型。您可以改为创建attached property。

标签： wpf wpf-controls controltemplate

【解决方案1】：

您可以使用<x:Array> 元素将Tag 属性设置为ImageSource[]：

<Button Content="Click" Style="{StaticResource myBtnStyle}">
    <Button.Tag>
        <x:Array Type="ImageSource">
            <BitmapImage UriSource="Images/Buldingimage2.jpeg" />
            <BitmapImage UriSource="Images/words.jpg" />
        </x:Array>
    </Button.Tag>
</Button>

您还需要将模板中的TemplateBindings 替换为与TemplatedParent 的绑定：

<Style x:Key="myBtnStyle" TargetType="{x:Type Button}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <StackPanel Orientation="Horizontal">
                    <Image x:Name="myImg" Source="{Binding Tag[0], RelativeSource={RelativeSource TemplatedParent}}" HorizontalAlignment="Left"/>
                    <ContentPresenter Content="{TemplateBinding Content}" HorizontalAlignment="Left"/>
                </StackPanel>

                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter TargetName="myImg" Property="Source" Value="{Binding Tag[1], RelativeSource={RelativeSource TemplatedParent}}" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

【讨论】：

谢谢。这正是我想要的^.^

【解决方案2】：

   <Style x:Key="btn_img" TargetType="Button">
        <Setter Property="Foreground" Value="Black"/>
        <Setter Property="Margin" Value="3"/>
        <Setter Property="Padding" Value="0"/>
        <Setter Property="FontWeight" Value="Medium"/>
        <Setter Property="FontSize" Value="12"/>
        <Setter Property="VerticalAlignment" Value="Center"/>

        <Setter Property="Background" Value="WhiteSmoke"/>

        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">

                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="5*"/>
                                <ColumnDefinition Width="auto"/>
                            </Grid.ColumnDefinitions>
                            <ContentPresenter Grid.Column="0" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="2 0 0 0">
                            </ContentPresenter>
                            <ContentControl HorizontalAlignment="Left" Grid.Column="1" Content="{TemplateBinding Tag}" Margin="0 0 2 0"/>
                        </Grid>

                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="Background" Value="{StaticResource b_blue}"/>
                <Setter Property="Foreground" Value="#fff"/>
            </Trigger>
            <Trigger Property="IsEnabled" Value="False">
                <Setter Property="Background" Value="Gray"/>
                <Setter Property="Foreground" Value="#fff"/>
            </Trigger>
        </Style.Triggers>
    </Style>

【讨论】：