切换按钮根据状态改变形象 [英] ToggleButton changing image depending on state

查看：85
本文介绍了切换按钮根据状态改变形象的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我想在下面的方式来使用切换按钮：
有5种不同的图像和他们每个人应显示根据当前状态：




  1. 按钮关闭

  2. 按钮启用，取消选中

  3. 启用按钮，选中，通过鼠标光标指向

  4. 启用按钮，检查

  5. 启用按钮，选中，通过鼠标光标



我已经找到了一个简单的例子，有两个图像的这里，但如何改变依赖于选中图片属性



第二个问题：我如何才能避免创造不同风格在我的应用程序的每个按钮？我使用的大约20个不同的按钮和他们每个人都有不同的图标。



到目前为止，我只用一个图标，下面我的代码。是否有可能有共同的代码（样式和模板），并定义截面图像，我想创建按钮（像我的代码段3）的来源？



 <控件模板X：键=ToggleButtonTemplate的TargetType ={X：输入切换按钮}> 
<网格和GT; 
< BORDER X：NAME =ContentBorderCornerRadius =4BorderBrush =透明了borderThickness =1背景={DynamicResource ButtonOff}> 
< ContentPresenter SnapsToDevicePixels ={TemplateBinding SnapsToDevicePixels}的Horizo​​ntalAlignment ={TemplateBinding Horizo​​ntalContentAlignment}保证金={TemplateBinding填充}VerticalAlignment ={TemplateBinding VerticalContentAlignment}RecognizesAccessKey =真/> 
< /边框> 
< /网格和GT; 
< ControlTemplate.Triggers> 
<触发属性=IsPressedVALUE =真正的> 
<二传手的TargetName =ContentBorder属性=背景VALUE ={DynamicResource ButtonOn}/> 
< /触发> 
<触发属性=器isCheckedVALUE =真正的> 
<二传手的TargetName =ContentBorder属性=背景VALUE ={DynamicResource ButtonOn}/> 
< /触发> 
<触发属性=IsEnabledVALUE =false的> 
<二传手的TargetName =ContentBorder属性=背景VALUE ={DynamicResource ButtonDisabled}/> 
< setter属性=前景VALUE ={DynamicResource BorderDisabled}/> 
< /触发> 
< /ControlTemplate.Triggers> 
< /控件模板> 
 
<风格X：键=ToggleButtonStyle的TargetType ={X：输入切换按钮}> 
< setter属性=宽度值=64/> 
< setter属性=高度值=64/> 
< setter属性=Horizo​​ntalContentAlignmentVALUE =中心/> 
< setter属性=VerticalContentAlignmentVALUE =中心/> 
< setter属性=模板VALUE ={DynamicResource ToggleButtonTemplate}/> 
< /样式和GT; 
 
<切换按钮器isChecked ={绑定路径= IsLectorModeEnabled}命令={结合CmdLector}风格={DynamicResource ToggleButtonStyle}> 
<图像来源={DynamicResource LectorImage}的Horizo​​ntalAlignment =中心VerticalAlignment =中心拉伸=无/> 
< /切换按钮>


解决方案

您可以通过创建一个用户控件得到你想要的功能它公开的依赖属性命令，器isChecked，并为每个状态的形象。用户控件将包含一个切换按钮和图像。



您可以使用MultiDataTriggers检测到您的状态，并于swtich取决于国家的形象。



由于你暴露了DependencyProperties有状态的图像，他们可以使用数据绑定，无论你宣布你的控制进行设置。该触发器将自动切换图像源为您，一旦状态变化





下面是部分例子，让你开始：



MyToggleButton.xaml：

 <用户控件X：类=ToggleTest.MyToggleButton
的xmlns =http://schemas.microsoft.com/winfx/2006/xaml/presentation
的xmlns为：x =http://schemas.microsoft.com/winfx/2006/xaml> 
<切换按钮
 =器isChecked{绑定的RelativeSource = {的RelativeSource FindAncestor，
 AncestorType = {X：类型切换按钮}}，
路径=}器isChecked'> 
<图像
 X：名称='按钮画面'> 
< Image.Style> 
<风格
的TargetType ='{X：类型图像}'> 
< Style.Triggers> 
< MultiDataTrigger> 
< MultiDataTrigger.Conditions> 
<条件
结合='{结合
的RelativeSource = {的RelativeSource FindAncestor，
 AncestorType = {X：类型切换按钮}}，
路径=器isChecked}'
值=真/> 
<条件
结合='{结合
的RelativeSource = {的RelativeSource自} 
路径= IsEnabled}'
值=真/> 
< /MultiDataTrigger.Conditions> 
<二传手
属性='源'
值='{结合
的RelativeSource = {的RelativeSource FindAncestor，
 AncestorType = {X：输入用户控件}}，
路径= EnabledChecked}/> 
< / MultiDataTrigger> 
< MultiDataTrigger> 
< MultiDataTrigger.Conditions> 
<条件
结合='{结合
的RelativeSource = {的RelativeSource FindAncestor，
 AncestorType = {X：类型切换按钮}}，
路径=器isChecked}'
值=FALSE/> 
<条件
结合='{结合
的RelativeSource = {的RelativeSource自} 
路径= IsEnabled}'
值=真/> 
< /MultiDataTrigger.Conditions> 
<二传手
属性='源'
值='{结合
的RelativeSource = {的RelativeSource FindAncestor，
 AncestorType = {X：输入用户控件}}，
路径= EnabledUnchecked}/> 
< / MultiDataTrigger> 
< MultiDataTrigger> 
< MultiDataTrigger.Conditions> 
<条件
结合='{结合
的RelativeSource = {的RelativeSource FindAncestor，
 AncestorType = {X：类型切换按钮}}，
路径=器isChecked}'
值=FALSE/> 
<条件
结合='{结合
的RelativeSource = {的RelativeSource自} 
路径= IsEnabled}'
值=FALSE/> 
< /MultiDataTrigger.Conditions> 
<二传手
属性='源'
值='{结合
的RelativeSource = {的RelativeSource FindAncestor，
 AncestorType = {X：输入用户控件}}，
路径= DisabledUnchecked}/> 
< / MultiDataTrigger> 
< /Style.Triggers> 
< /样式和GT; 
< /Image.Style> 
< /图像> 
< /切换按钮>





和CS文件：

 使用系统; 
 $ B $使用System.Windows B：使用System.Windows.Controls的
;使用System.Windows.Media 
; 
 
命名空间ToggleTest 
 
 {
 ///<总结> $ B $为ToggleButton.xaml 
 ///< b ///交互逻辑; /总结> 
公共部分类MyToggleButton：用户控件
 {
公共MyToggleButton（）
 {
的InitializeComponent（）; 
} 
 
 
公共静态只读的DependencyProperty EnabledUncheckedProperty = 
 DependencyProperty.Register（
EnabledUnchecked，
 typeof运算（ImageSource的），
 typeof运算（MyToggleButton），
新PropertyMetadata（onEnabledUncheckedChangedCallback））; 
 
公众的ImageSource EnabledUnchecked 
 {
 {返回（ImageSource的）的GetValue（EnabledUncheckedProperty）; } 
集合{的SetValue（EnabledUncheckedProperty，值）; } 
} 
 
静态无效onEnabledUncheckedChangedCallback（
的DependencyObject DOBJ，
 DependencyPropertyChangedEventArgs参数）
 {
 //做一些事情，如果需要
} 
 
公共静态只读的DependencyProperty DisabledUncheckedProperty = 
 DependencyProperty.Register（
DisabledUnchecked，
 typeof运算（ImageSource的），
 typeof运算（MyToggleButton） 
新PropertyMetadata（onDisabledUncheckedChangedCallback））; 
 
公众的ImageSource DisabledUnchecked 
 {
 {返回（ImageSource的）的GetValue（DisabledUncheckedProperty）; } 
集合{的SetValue（DisabledUncheckedProperty，值）; } 
} 
 
静态无效onDisabledUncheckedChangedCallback（
的DependencyObject DOBJ，
 DependencyPropertyChangedEventArgs参数）
 {
 //做一些事情，如果需要
} 
 
 
公共静态只读的DependencyProperty EnabledCheckedProperty = 
 DependencyProperty.Register（
EnabledChecked，
 typeof运算（ImageSource的），
的typeof （MyToggleButton），
新PropertyMetadata（onEnabledCheckedChangedCallback））; 
 
公众的ImageSource EnabledChecked 
 {
 {返回（ImageSource的）的GetValue（EnabledCheckedProperty）; } 
集合{的SetValue（EnabledCheckedProperty，值）; } 
} 
 
静态无效onEnabledCheckedChangedCallback（
的DependencyObject DOBJ，
 DependencyPropertyChangedEventArgs参数）
 {
 //做一些事情，如果需要
} 
 
 
公共静态只读的DependencyProperty IsCheckedProperty = 
 DependencyProperty.Register（
器isChecked，
 typeof运算（布尔），
的typeof （MyToggleButton），
新PropertyMetadata（onCheckedChangedCallback））; 
 
公布尔器isChecked 
 {
 {返回（布尔）的GetValue（IsCheckedProperty）; } 
集合{如果（值=器isChecked！）的SetValue（IsCheckedProperty，值）; } 
} 
 
静态无效onCheckedChangedCallback（
的DependencyObject DOBJ，
 DependencyPropertyChangedEventArgs参数）
 {
 //做一些事情，如果需要的话
} 
 
 
 
} 
}

此控制可用于像这样：

 <局部：MyToggleButton 
器isChecked =真 
 IsEnabled ='假'
 EnabledChecked ='<添加您的图像源在这里与GT;'
 EnabledUnchecked ='<在这里添加您的图像源>'
 DisabledUnchecked ='<这里>添加您的图像源;/>


I would like to use ToggleButton in following way: There are 5 different images and each of them should be displayed depending on current state:

  1. button disabled
  2. button enabled, unchecked
  3. button enabled, unchecked, pointed by mouse cursor
  4. button enabled, checked
  5. button enabled, checked, pointed by mouse cursor

I've found a simple example with two images here , but how to change the image depending on "checked" property?

The second question: how can I avoid creating different styles for each button in my application? I'm using about 20 different buttons and each of them has different set of icons.

So far I'm using only one icon, below my code. Is it possible to have common code (style and template) and to define the source of images in section where I want to create button (like in section 3 of my code)?

<ControlTemplate x:Key="ToggleButtonTemplate" TargetType="{x:Type ToggleButton}">
    <Grid>
        <Border x:Name="ContentBorder" CornerRadius="4" BorderBrush="Transparent" BorderThickness="1" Background="{DynamicResource ButtonOff}">
            <ContentPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" RecognizesAccessKey="True"/>
        </Border>
    </Grid>
    <ControlTemplate.Triggers>
        <Trigger Property="IsPressed" Value="true">
            <Setter TargetName="ContentBorder" Property="Background" Value="{DynamicResource ButtonOn}"/>
        </Trigger>
        <Trigger Property="IsChecked" Value="true">
            <Setter TargetName="ContentBorder" Property="Background" Value="{DynamicResource ButtonOn}"/>
        </Trigger>
        <Trigger Property="IsEnabled" Value="false">
            <Setter TargetName="ContentBorder" Property="Background" Value="{DynamicResource ButtonDisabled}"/>
            <Setter Property="Foreground" Value="{DynamicResource BorderDisabled}"/>
        </Trigger>
    </ControlTemplate.Triggers>
</ControlTemplate>

<Style x:Key="ToggleButtonStyle" TargetType="{x:Type ToggleButton}">
    <Setter Property="Width" Value="64" />
    <Setter Property="Height" Value="64" />
    <Setter Property="HorizontalContentAlignment" Value="Center"/>
    <Setter Property="VerticalContentAlignment" Value="Center"/>
    <Setter Property="Template" Value="{DynamicResource ToggleButtonTemplate}" />
</Style>

<ToggleButton IsChecked="{Binding Path=IsLectorModeEnabled}" Command="{Binding CmdLector}" Style="{DynamicResource ToggleButtonStyle}">
    <Image Source="{DynamicResource LectorImage}" HorizontalAlignment="Center" VerticalAlignment="Center" Stretch="None" />
</ToggleButton>

解决方案

You can get the functionality you want by creating a UserControl that exposes dependency properties for Command, IsChecked, and one for each stateful image. Your user control will contain a toggle button and image.

You can use MultiDataTriggers to detect your state and swtich the image depending on the state.

Because you exposed the DependencyProperties for the stateful images, they can be set using Databinding wherever you declare your control. The triggers will automatically switch the image source for you, once state changes.

[Edit: Added some code to help explain]

Here is a partial example to get you started:

MyToggleButton.xaml:

<UserControl x:Class="ToggleTest.MyToggleButton"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<ToggleButton
    IsChecked='{Binding RelativeSource={RelativeSource FindAncestor, 
    AncestorType={x:Type ToggleButton} }, 
    Path=IsChecked}'>
    <Image
        x:Name='ButtonImage'>
        <Image.Style>
            <Style
                TargetType='{x:Type Image}'>
                <Style.Triggers>
                    <MultiDataTrigger>
                        <MultiDataTrigger.Conditions>
                            <Condition
                                Binding='{Binding 
                                RelativeSource={RelativeSource FindAncestor, 
                                AncestorType={x:Type ToggleButton} }, 
                                Path=IsChecked}'
                                Value='True' />
                            <Condition
                                Binding='{Binding 
                                RelativeSource={RelativeSource Self}, 
                                Path=IsEnabled}'
                                Value='True' />
                        </MultiDataTrigger.Conditions>
                        <Setter
                            Property='Source'
                            Value='{Binding 
                            RelativeSource={RelativeSource FindAncestor, 
                            AncestorType={x:Type UserControl} }, 
                            Path=EnabledChecked}' />
                    </MultiDataTrigger>
                    <MultiDataTrigger>
                        <MultiDataTrigger.Conditions>
                            <Condition
                                Binding='{Binding 
                                RelativeSource={RelativeSource FindAncestor, 
                                AncestorType={x:Type ToggleButton} }, 
                                Path=IsChecked}'
                                Value='False' />
                            <Condition
                                Binding='{Binding 
                                RelativeSource={RelativeSource Self}, 
                                Path=IsEnabled}'
                                Value='True' />
                        </MultiDataTrigger.Conditions>
                        <Setter
                            Property='Source'
                            Value='{Binding 
                            RelativeSource={RelativeSource FindAncestor, 
                            AncestorType={x:Type UserControl} }, 
                            Path=EnabledUnchecked}' />
                    </MultiDataTrigger>
                    <MultiDataTrigger>
                        <MultiDataTrigger.Conditions>
                            <Condition
                                Binding='{Binding 
                                RelativeSource={RelativeSource FindAncestor, 
                                AncestorType={x:Type ToggleButton} }, 
                                Path=IsChecked}'
                                Value='False' />
                            <Condition
                                Binding='{Binding 
                                RelativeSource={RelativeSource Self}, 
                                Path=IsEnabled}'
                                Value='False' />
                        </MultiDataTrigger.Conditions>
                        <Setter
                            Property='Source'
                            Value='{Binding 
                            RelativeSource={RelativeSource FindAncestor, 
                            AncestorType={x:Type UserControl} }, 
                            Path=DisabledUnchecked}' />
                    </MultiDataTrigger>
                </Style.Triggers>
            </Style>
        </Image.Style>
    </Image>
</ToggleButton>

And the cs file:

using System;

    using System.Windows;
    using System.Windows.Controls;
    using System.Windows.Media;

    namespace ToggleTest

{
    /// <summary>
    /// Interaction logic for ToggleButton.xaml
    /// </summary>
    public partial class MyToggleButton : UserControl
    {
        public MyToggleButton()
        {
            InitializeComponent();
        }


        public static readonly DependencyProperty EnabledUncheckedProperty =
            DependencyProperty.Register(
            "EnabledUnchecked",
            typeof(ImageSource),
            typeof(MyToggleButton),
            new PropertyMetadata(onEnabledUncheckedChangedCallback));

        public ImageSource EnabledUnchecked
        {
            get { return (ImageSource)GetValue(EnabledUncheckedProperty); }
            set { SetValue(EnabledUncheckedProperty, value); }
        }

        static void onEnabledUncheckedChangedCallback(
            DependencyObject dobj,
            DependencyPropertyChangedEventArgs args)
        {
            //do something if needed
        }

        public static readonly DependencyProperty DisabledUncheckedProperty =
            DependencyProperty.Register(
            "DisabledUnchecked",
            typeof(ImageSource),
            typeof(MyToggleButton),
            new PropertyMetadata(onDisabledUncheckedChangedCallback));

        public ImageSource DisabledUnchecked
        {
            get { return (ImageSource)GetValue(DisabledUncheckedProperty); }
            set { SetValue(DisabledUncheckedProperty, value); }
        }

        static void onDisabledUncheckedChangedCallback(
            DependencyObject dobj,
            DependencyPropertyChangedEventArgs args)
        {
            //do something if needed
        }


        public static readonly DependencyProperty EnabledCheckedProperty =
            DependencyProperty.Register(
            "EnabledChecked",
            typeof(ImageSource),
            typeof(MyToggleButton),
            new PropertyMetadata(onEnabledCheckedChangedCallback));

        public ImageSource EnabledChecked
        {
            get { return (ImageSource)GetValue(EnabledCheckedProperty); }
            set { SetValue(EnabledCheckedProperty, value); }
        }

        static void onEnabledCheckedChangedCallback(
            DependencyObject dobj,
            DependencyPropertyChangedEventArgs args)
        {
            //do something if needed
        }


        public static readonly DependencyProperty IsCheckedProperty =
            DependencyProperty.Register(
            "IsChecked",
            typeof(Boolean),
            typeof(MyToggleButton),
            new PropertyMetadata(onCheckedChangedCallback));

        public Boolean IsChecked
        {
            get { return (Boolean)GetValue(IsCheckedProperty); }
            set { if(value != IsChecked) SetValue(IsCheckedProperty, value); }
        }

        static void onCheckedChangedCallback(
            DependencyObject dobj,
            DependencyPropertyChangedEventArgs args)
        {
            //do something, if needed
        }



    }
}

This control could be used like so:

<local:MyToggleButton
            IsChecked='True'
            IsEnabled='False'
            EnabledChecked='<add your image source here>'
            EnabledUnchecked='<add your image source here>'
            DisabledUnchecked='<add your image source here>'/>

这篇关于切换按钮根据状态改变形象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
C#/.NET最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆