none
Button的template求解 RRS feed

  • 问题

  • 我有多个button,在状态改变时,如 mouseover ,click,mouseout三种状态,要求更改button的背景图片。

    我的思路是创建一个button的子类,然后扩展三个属性来对应三个状态。然后使用template来确定要在哪个状态下使用哪个图片。

    我的代码如下:

        public class StatedButton : Button
        {
    
            public StatedButton() : base()
            {
            }
    
            public static readonly DependencyProperty NormalStateProperty =
                DependencyProperty.Register("NormalState", 
                    typeof(string), 
                    typeof(StatedButton),new FrameworkPropertyMetadata(null));
    
            [Bindable(true), Category("Appearance")]
            public Brush NormalState
            {
                get => (Brush)GetValue(NormalStateProperty);
                set => SetValue(NormalStateProperty, value);
            }
    
            public static readonly DependencyProperty MouseOverStateProperty =
                DependencyProperty.Register("MouseOverState", typeof(string), typeof(StatedButton), new FrameworkPropertyMetadata(null));
    
    
            [Bindable(true), Category("Appearance")]
            public Brush MouseOverState
            {
                get => (Brush)GetValue(MouseOverStateProperty);
                set => SetValue(MouseOverStateProperty, value);
            }
    
            public static readonly DependencyProperty SelectStateProperty =
                DependencyProperty.Register("SelectState", typeof(string), typeof(StatedButton), new FrameworkPropertyMetadata(null));
    
    
            [Bindable(true), Category("Appearance")]
            public Brush SelectState
            {
                get => (Brush)GetValue(SelectStateProperty);
                set => SetValue(SelectStateProperty, value);
            }
    
        }
    }

    xaml

                <Style x:Key="StyleBtn" TargetType="{x:Type local:StatedButton}">
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="{x:Type local:StatedButton}">
                                <Grid>
                                    <Border BorderBrush="{x:Null}">
                                        <Image x:Name="btnImg" Source="{x:Null}"></Image>
                                    </Border>
                                    <ContentPresenter></ContentPresenter>
                                </Grid>
                                <ControlTemplate.Triggers>
                                    <Trigger Property="IsMouseOver" Value="True">
                                        <Setter TargetName="btnImg" Property="Source"  Value="{TemplateBinding MouseOverState}"/>
                                    </Trigger>
                                    <Trigger Property="IsMouseCaptured" Value="True">
                                        <Setter TargetName="btnImg" Property="Source"  Value="{TemplateBinding SelectState}"/>
                                    </Trigger>
                                </ControlTemplate.Triggers>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>

    然而 ide 提示 

    Value="{TemplateBinding

    The type initializer for 'WpfApp2.StatedButton' threw an exception.

    如果解决?

    <style type="text/css">p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 9.5px Helvetica; color: #b4261a; background-color: #000000} span.s1 {color: #ff2600} span.s2 {color: #0433ff} </style>
    2017年11月3日 11:39

答案

全部回复

  • Hi,

    不用那么麻烦,你只需重写button的模版,然后设置触发器就OK了。

    参考下面的代码:

       <ControlTemplate x:Key="ImageButton1" TargetType="{x:Type Button}">
                    <Border x:Name="border"
                    Background="Red"
                    BorderBrush="Blue"
                    BorderThickness="3"
                    CornerRadius="5"
                    TextBlock.Foreground="White">
                        <Grid>
                            <Image x:Name="image" Source="pack://application:,,,/wpfAppDemo;component/Images/Delete_64x.png" Stretch="UniformToFill"/>
                            <ContentPresenter Margin="{TemplateBinding Padding}"
                                      HorizontalAlignment="Center"
                                      VerticalAlignment="Center"/>
                        </Grid>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="true">
                            <Setter TargetName="border" Property="Background" Value="DarkRed"/>
                            <Setter TargetName="border" Property="BorderBrush" Value="DarkRed"/>
                            <Setter TargetName="image" Property="Source" Value="pack://application:,,,/wpfAppDemo;component/Images/Insert_64x.png"/>
                        </Trigger>
                        <Trigger Property="IsPressed" Value="true">
                            <Setter TargetName="border" Property="Background" Value="blue"/>
                            <Setter TargetName="border" Property="BorderBrush" Value="Red"/>
                            <Setter TargetName="image" Property="Source" Value="pack://application:,,,/wpfAppDemo;component/Images/Save_64x.png"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
      <Button
                Height="130" Width="130"
                  Template="{StaticResource ImageButton1}"
                Content=" Button" />

    Sinserely,

    Bob


    MSDN Community Support
    Please remember to click "Mark as Answer" the responses that resolved your issue, and to click "Unmark as Answer" if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

    2017年11月4日 12:51
    版主
  • 首先,多谢 Bob ,这个示例不错。

    但是,我其实最主要的问题在于 “多个Button ” ,每个Button都有自己的图片组对应不同的状态。

    所以,我才想要继承button创建一个子类。不然,最大的可能是每个button下都应用一次模板,然后在模板里设置对应的图片。

    2017年11月4日 13:23
  • Hi,

    参考下面文章重写Button.

    http://www.cnblogs.com/anding/p/4968050.html

    http://www.cnblogs.com/QinYK/p/4075020.html

    希望有帮助。

    Bob


    MSDN Community Support
    Please remember to click "Mark as Answer" the responses that resolved your issue, and to click "Unmark as Answer" if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

    • 已标记为答案 jinli.zh 2017年11月5日 0:56
    2017年11月4日 16:25
    版主
  • 非常感谢。
    2017年11月5日 0:56