Question

我想要一个带有圆边网格的按钮，并将禁用按钮颜色设置为灰色，否则设置为绿色。附上的代码片段。我不知道如何更改默认值。如果我禁用我的按钮，我将输出作为左侧的图像，但是，我希望它看起来像右边的图像！

<Button x:Name="button" Height="30" Width="100"  Margin="825,0,0,0" Background="Transparent" 
        BorderThickness="0" BorderBrush="Transparent">
    <Button.Content>
        <Border CornerRadius="12.5" Height="25" Width="95" Margin="0" BorderBrush="Gray" 
            BorderThickness="4,4,4,4" Background="Gray">
            <TextBlock Text="Back" HorizontalAlignment="Center" VerticalAlignment="Top" 
                   Margin="12,0,13,0" Foreground="White"/>
        </Border>
    </Button.Content>
</Button>

Answer 1

内容只是Button的一部分。其余部分由Template确定。

如果多个按钮应具有自定义外观，则应在按钮样式中设置模板。对于一个按钮，它可以在现场完成：

<Button x:Name="button" Content="Back" Height="30" Width="100"  Margin="825,0,0,0" Background="Transparent" 
        BorderThickness="0" BorderBrush="Transparent">
    <Button.Template>
      <ControlTemplate TargetType="Button">
        <Border CornerRadius="12.5" Height="25" Width="95" Margin="0" BorderBrush="Gray" 
                BorderThickness="4,4,4,4" Background="Gray">
            <TextBlock Text="{TemplateBinding Content}"
                       HorizontalAlignment="Center" VerticalAlignment="Top" 
                       Margin="12,0,13,0" Foreground="White"/>
        </Border>
      </ControlTemplate>
    </Button.Template>
</Button>

如果要重用模板，请将其声明为Resource

<Window.Resources>
    <ControlTemplate TargetType="Button" x:Key="RoundBtn">
        <Border Name="roundBorder" CornerRadius="12.5" Height="25" Width="95" Margin="0" BorderBrush="Gray" 
                BorderThickness="4,4,4,4" Background="Gray">
            <TextBlock Text="{TemplateBinding Content}"
                       HorizontalAlignment="Center" VerticalAlignment="Top" 
                       Margin="12,0,13,0" Foreground="White"/>
        </Border>
        <ControlTemplate.Triggers>
            <Trigger Property="IsEnabled" Value="false">
                <Setter TargetName="roundBorder" Property="Background" Value="Green"/>
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>
</Window.Resources>

并使用资源设置按钮模板：

<Button x:Name="button" Content="Back" Height="30" Width="100"
        Template="{StaticResource RoundBtn}"
        Margin="825,0,0,0" Background="Transparent" 
        BorderThickness="0" BorderBrush="Transparent"/>

Answer 2

这对你有用。我使用了一个带有蓝色背景的外部网格，这样我就可以确定它一切正常，但只需删除它并将样式移动到您需要的任何资源。解释为xaml中的注释：

<Grid Background="Blue">
    <Grid.Resources>
        <!-- Override the default button style, otherwise you get a grey
             rectangle behind the ellipse when disabled -->
        <Style TargetType="Button" x:Key="MyButtonStyle">
            <Setter Property="OverridesDefaultStyle" Value="True" />
            <Setter Property="Background" Value="Transparent" />
            <Setter Property="Foreground" Value="Transparent" />

            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Grid Background="{TemplateBinding Background}">
                            <ContentPresenter x:Name="MyContentPresenter" 
                                              Content="{TemplateBinding Content}"
                                              HorizontalAlignment="Center" 
                                              VerticalAlignment="Center" />
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Grid.Resources>  

    <Button x:Name="button" Height="30" Width="100"
            BorderThickness="0" BorderBrush="Transparent" IsEnabled="false"
            Style="{StaticResource MyButtonStyle}">
        <Button.Content>
            <Border CornerRadius="12.5" Height="25" Width="95">
                <Border.Style>
                    <Style TargetType="Border">
                        <!-- Button is gray by default, i.e. when enabled -->
                        <Setter Property="Background" Value="Gray"/>
                            <Style.Triggers>
                            <!-- If the button becomes disabled then it becomes green -->
                            <Trigger Property="IsEnabled" Value="False">
                                <Setter Property="Background" Value="Green" />
                            </Trigger>
                        </Style.Triggers>
                    </Style>
                </Border.Style>
                <TextBlock Text="Back" HorizontalAlignment="Center" VerticalAlignment="Center" 
                           Foreground="White"/>
            </Border>
        </Button.Content>
    </Button>
</Grid>

带有圆边网格的按钮，并将禁用按钮颜色设置为绿色

2 个答案: