Question

我需要一个带图片的按钮和一些文字，我们称之为MyButton。每次显示MyButton时，按钮颜色，图像位置，文本位置，图像大小和字体大小保持不变。但是每次图像源和文本都不同。最后，按钮的不透明度在禁用时需要设置为0.2，在启用时需要设置为1.

到目前为止我的方法（如果有更好的方法，请纠正我）是创建一个后面带有代码的XAML文件继承Button类。我的XAML类似于：

<Button x:Class="MyButton"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="400">

    <!--Blank template for a flat borderless button-->
    <Button.Template>
        <ControlTemplate TargetType="Button"/>
    </Button.Template>

    <Grid Background="#F2F2F2">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>

        <Image Name="ImgControl" Width="32" Height="32" Grid.Column="0"/>

        <TextBlock Name="Label" VerticalAlignment="Center" Grid.Column="1"/>

    </Grid>
</Button>

代码背后：

Partial Public Class MyButton
Inherits Button

Private _imgSrc As String
Public Property ImageSource As String
    Get
        Return _imgSrc
    End Get
    Set(value As String)
        _imgSrc = value
        Dim imgUri As New Uri(_imgSrc, UriKind.RelativeOrAbsolute)
        ImgControl.Source = New BitmapImage(imgUri)
    End Set
End Property

Public Property ButtonText As String
    Get
        Return Label.Text
    End Get
    Set(value As String)
        Label.Text = value
    End Set
End Property
End Class

所以每当我在XAML中使用它时，我只需要声明按钮，ImageSource和ButtonText属性。

到目前为止这个工作正常但我在启用/禁用按钮时设置不透明度时遇到问题。我试过运气不好的转换器。有什么建议吗？

由于

Answer 1

在MyButton类中创建一个依赖项prop：

public double myOpacity
    {
        get { return (double)GetValue(myOpacityProperty); }
        set { SetValue(myOpacityProperty, value); }
    }

    public static readonly DependencyProperty myOpacityProperty =
        DependencyProperty.Register("myOpacity", typeof(double), typeof(MyButton), new PropertyMetadata(0.2));

在你的XAML中设置不透明度

Opacity="{Binding BindsDirectlyToSource=True, Path= myOpacity}"

然后在你的代码后面改变你设置它的不透明度 mybutton.myOpacity = 1;

Answer 2

或者像这个例子一样使用视觉状态管理器：

<Button Width="150" IsEnabled="True" Height="100">
        <Button.Template>
            <ControlTemplate TargetType="Button">
                <Grid Background="#F2F2F2" x:Name="BtnBg">
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="Common">
                            <VisualState x:Name="Normal"/>
                            <VisualState x:Name="Disabled">
                                <Storyboard>
                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetName="BtnBg" Storyboard.TargetProperty="Opacity">
                                        <SplineDoubleKeyFrame KeyTime="0" Value=".2"/>
                                    </DoubleAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>

                    <Image Name="ImgControl" Width="32" Height="32" Grid.Column="0"/>

                    <TextBlock Name="Label" VerticalAlignment="Center" Grid.Column="1"/>

                </Grid>
            </ControlTemplate>
        </Button.Template>
    </Button>

更改字段“IsEnabled”，您将看到更改。

禁用时设置自定义按钮的不透明度

2 个答案: