自定义wpf中切换按钮的切换状态

Question

我想在wpf中自定义切换按钮的切换状态.我想在打开按钮时将图像设置为切换按钮,并在关闭时设置另一个图像.为此,我想到了使用触发器.这就是我最终做的事情,

<Window ...>
    <Window.Resources>
        <Image x:Key="OnImage" Source="C:\ON.jpg" />
        <Image x:Key="OffImage" Source="C:\OFF.jpg" />
        <Style x:Key="OnOffToggleImageStyle" TargetType="ToggleButton">
            <Style.Triggers>
                <Trigger Property="IsChecked" Value="True">
                    <Setter Property="Content" Value="{StaticResource OnImage}" />
                </Trigger>
                <Trigger Property="IsChecked" Value="False">
                    <Setter Property="Content" Value="{StaticResource OffImage}" />
                </Trigger>
            </Style.Triggers>
        </Style>
    </Window.Resources>
    <ListBox>
        <ListBox.ItemTemplate>
            <DataTemplate>
                ...
                <ToggleButton IsChecked="{Binding Status}" Width="100" Height="35" Style="{StaticResource OnOffToggleImageStyle}" />
                ...
            </DataTemplate>
        </ListBox.ItemTemplate>
</Window>

上面的代码段似乎只适用于列表框中的两个项目.如果多个项目具有绑定值,则status为true,则不起作用(仅适用于一个此类项目).请告诉我,我是否正在朝着正确的方向前进.还告诉我实现这一目标的其他方法.

Answer 1

这里的问题是因为您正在使用Image资源.在Image你的资源是一个控制的具体实例.它一次只能在一个地方.所以当你的列表中有多个项目时......

这应该适合你:

<Style x:Key="OnOffToggleImageStyle" TargetType="ToggleButton">
 <Style.Triggers>
   <Trigger Property="IsChecked" Value="True">
     <Setter Property="Content">
       <Setter.Value>
         <Image Source="C:\ON.jpg" />
       </Setter.Value>
     </Setter>
   </Trigger>
   <Trigger Property="IsChecked" Value="False">
     <Setter Property="Content">
       <Setter.Value>
         <Image Source="C:\OFF.jpg" />
       </Setter.Value>
     </Setter>
   </Trigger>
 </Style.Triggers>
</Style>

请注意,您可以通过ImageSource对资源中的每个图像文件使用一个来提高性能,然后在中引用它Image.这实际上意味着每个图像仅从磁盘加载一次,而不是2*N次(其中N是列表中的项目数).

Answer 2

这个答案对你有帮助.在那里,我采用了一个ToggleButton并将其设计为TreeView中的ToggleButton(+/ - 部分以展开折叠节点).您只需要更改绘制 - 和+符号的路径,以显示您的图像.

这里给你个性化,只需在你的C:\目录下放一个名为"on.jpg"的图像和另一个名为"off.jpg"的图像,它应该只需复制/粘贴到你的窗口即可:

    <Window.Resources>
        <SolidColorBrush x:Key="GlyphBrush" Color="#444" />
        <ControlTemplate x:Key="toggleButtonTemplate" TargetType="ToggleButton">
            <Grid
                Width="15"
                Height="13"
                Background="Transparent">
                <Image x:Name="ExpandImage"
                      Source="C:\off.jpg"
                      HorizontalAlignment="Left" 
                      VerticalAlignment="Center" 
                      Margin="1,1,1,1" />                     
            </Grid>
            <ControlTemplate.Triggers>
                <Trigger Property="IsChecked"
                     Value="True">
                    <Setter Property="Source"
                      TargetName="ExpandImage"
                      Value="C:\on.jpg"/>
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
        <Style x:Key="toggleButtonStyle" TargetType="ToggleButton">
            <Setter Property="Template" Value="{StaticResource toggleButtonTemplate}" />
        </Style>
    </Window.Resources>
    <Grid>
        <ToggleButton Style="{StaticResource toggleButtonStyle}" />
    </Grid>