C# WPF 将多图像源 ControlTemplate 与 Button.Tag 结合使用

Question

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

<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>

Answer 1

   <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>

Answer 2

您可以使用 <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>

C# WPF 将多图像源 ControlTemplate 与 Button.Tag 结合使用

C# WPF Use multi image source ControlTemplate with Button.Tag

wpf

wpf-controls

controltemplate