iT邦幫忙

0

WPF-Image ToggleButton

ImageToggleButton

方法一

  • 直接在Xaml中使用Style與ControlTemplate,
  • 並在ControlTemplate中建一個Image 為Unchecked的圖片,
  • 在ControlTemplate中再建一個Trigger,當IsChecked為Ture時,負責切換圖片
<ToggleButton
            x:Name="ToogleBtn"
            Margin="150 0 0 0"
            Width="44"
            Height="44">
            <ToggleButton.Style>
                <Style TargetType="ToggleButton">
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="ToggleButton">
                                <Image x:Name="img" Source="Image/Car-Loan.png" />
                                <ControlTemplate.Triggers>
                                    <Trigger Property="IsChecked" Value="True">
                                        <Setter TargetName="img" Property="Source" Value="Image/Car-Loan-WF.png" />
                                    </Trigger>
                                </ControlTemplate.Triggers>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </ToggleButton.Style>
        </ToggleButton>

方法二

但上述的使用方式,若有多個ToggleButton,且每個都不同圖片時,會造成Xaml較長,因此改善其作法

  • 建一Custom Control
  • 建立ImageToggleButton的 CheckedImageSource 與UncheckedImageSource的 Property
public ImageSource CheckedImageSource
        {
            get => (ImageSource)GetValue(CheckedImageSourceProperty);
            set => SetValue(CheckedImageSourceProperty, value);
        }

        public static readonly DependencyProperty CheckedImageSourceProperty =
            DependencyProperty.Register("CheckedImageSource", typeof(ImageSource), typeof(ImageToggleButton), new PropertyMetadata(null));

        public ImageSource UncheckedImageSource
        {
            get => (ImageSource)GetValue(UncheckedImageSourceProperty);
            set => SetValue(UncheckedImageSourceProperty, value);
        }

        public static readonly DependencyProperty UncheckedImageSourceProperty =
            DependencyProperty.Register("UncheckedImageSource", typeof(ImageSource), typeof(ImageToggleButton), new PropertyMetadata(null));
  • 在建立Custom Control時,會在Theme資料夾中產生一個Generic.xaml,修改裡面的ImageToggleButton Style
<Style TargetType="{x:Type local:ImageToggleButton}">
        <Setter Property="Height" Value="50" />
        <Setter Property="Width" Value="50" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type local:ImageToggleButton}">
                    <Image x:Name="img" Source="{TemplateBinding UncheckedImageSource}" />
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsChecked" Value="True">
                            <Setter TargetName="img" Property="Source" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=CheckedImageSource}" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
  • 最後就可以使用這個ImageToggleButton了
<local:ImageToggleButton CheckedImageSource="Image/Car-Loan.png" UncheckedImageSource="Image/Align-Right.png" />

https://github.com/houzhiwei/WPFImageToggleButton.git


圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言