一个窗口商店应用的XAML圆角按钮

本文关键字：应用 XAML 圆角 按钮 一个 窗口 | 更新日期: 2023-09-27 18:07:07

2小时前这对我来说似乎是一个非常简单的问题，但是我还没有取得任何进展。

我昨晚第一次搜索，说要创建一个圆角按钮，你只需要把它放在一个边框中，然后把边框的边缘画圆，像这样…

    <Border BorderThickness="1"
            BorderBrush="Black"
            CornerRadius="10"
            Padding="4"
            Background="#FFB8B1B1"
            HorizontalAlignment="Center"
            VerticalAlignment="Center">
        <Button Width="45"
                Height="35"
                Name="GetFileName"
                VerticalAlignment="Top"
                VerticalContentAlignment="Top"
                BorderThickness="0"
                FontSize="16"
                Foreground="Black"
                Tapped="GetFileName_Tapped"
                Background="#FFB8B1B1">Pick</Button>
    </Border>

这看起来不错，但我想让一件事看起来更好。当您将鼠标悬停在按钮上时，背景会改变颜色，但不会改变边框的背景。要实现这第二部分已经难倒了我。任何线索将不胜感激。谢谢你,约翰。

一个窗口商店应用的XAML圆角按钮

一种可能性是使用ControlTemplate和VisualStateManager

            <Button.Template>
            <ControlTemplate TargetType="Button">
                <Border BorderThickness="1"
                        x:Name="MBorder"
                        BorderBrush="Black"
                        CornerRadius="10"
                        Padding="4">
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal">
                                <VisualState.Setters>
                                    <Setter Target="MGrid.Background" Value="#FFB8B1B1"/>
                                    <Setter Target="MBorder.Background" Value="#FFB8B1B1"/>
                                </VisualState.Setters>
                            </VisualState>
                            <VisualState x:Name="PointerOver">
                                <VisualState.Setters>
                                    <Setter Target="MGrid.Background" Value="Green"/>
                                    <Setter Target="MBorder.Background" Value="Green"/>
                                </VisualState.Setters>
                            </VisualState>
                            <VisualState x:Name="Pressed">
                                <VisualState.Setters>
                                    <Setter Target="MGrid.Background" Value="Blue"/>
                                    <Setter Target="MBorder.Background" Value="Blue"/>
                                </VisualState.Setters>
                            </VisualState>
                            <VisualState x:Name="Disabled"/>

                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <Grid x:Name="MGrid">
                        <ContentControl Content="{TemplateBinding Content}"
                                        VerticalContentAlignment="Center"
                                        HorizontalAlignment="Center"
                                        FontSize="{TemplateBinding FontSize}"
                                        Foreground="{TemplateBinding Foreground}"/>
                    </Grid>
                </Border>
            </ControlTemplate>
        </Button.Template>
    </Button>

我用@Mihkel的答案来解决这个问题。然而，他的回答忽略了一个关键因素，那就是边境的背景。我在控件中命名了边框，并在边框中设置了Template绑定。然后引用那个，以及按钮的背景。我试着把变化加粗，但他们只是出现为**，在星号中封装的代码是变化。

 <Button Content="Pick"
        Width="45"
        Height="35"
        VerticalAlignment="Center"
        HorizontalAlignment="Center"
        BorderThickness="0"
        FontSize="16"
        Foreground="Black"
        Tapped="GetFileName_Tapped"
        Background="#FFB8B1B1">
        <Button.Template>
            <ControlTemplate TargetType="Button">
                <Border BorderThickness="1"
                    BorderBrush="Green" 
                    CornerRadius="10"
                    Padding="4"
                    **Background="{TemplateBinding Background}"**

                    Name="TheBorder"
                    >
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal">
                                <VisualState.Setters>
                                    <Setter Target="MGrid.Background" Value="#FFB8B1B1"/>
                                    **<Setter Target="TheBorder.Background" Value="#FFB8B1B1"  />**
                                </VisualState.Setters>
                            </VisualState>
                            <VisualState x:Name="PointerOver">
                                <VisualState.Setters>
                                    <Setter Target="MGrid.Background" Value="Green"/>
                                    **<Setter Target="TheBorder.Background" Value="Green"  />**
                                </VisualState.Setters>
                            </VisualState>
                            <VisualState x:Name="Pressed">
                                <VisualState.Setters>
                                    <Setter Target="MGrid.Background" Value="Blue"/>
                                    **<Setter Target="TheBorder.Background" Value="Blue"  />**
                                </VisualState.Setters>
                            </VisualState>
                            <VisualState x:Name="Disabled"/>

                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <Grid x:Name="MGrid">
                        <ContentControl Content="{TemplateBinding Content}"
                                    VerticalContentAlignment="Center"
                                    HorizontalAlignment="Center"
                                    FontSize="{TemplateBinding FontSize}"
                                    Foreground="{TemplateBinding Foreground}"
                                     Background="{TemplateBinding Background}"/>
                    </Grid>
                </Border>
            </ControlTemplate>
        </Button.Template>
    </Button>

值得注意的是，这将在一个名为Essential Video Editor的开源项目中使用。一个早期版本在windows商店中。源代码在GitHub.com/gibbloggen，当我发布这一部分时，我会把这篇文章作为参考。

相关文章：