Question

这在我看来是一个非常简单的问题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>

这看起来不错，但我希望有一件事看起来更好。将鼠标悬停在按钮上时，背景会改变颜色，但不会改变边框的背景。实现这个第二部分让我很难过。任何线索将不胜感激。谢谢，约翰。

Answer 1

一种可能性是使用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>

Answer 2

我用@Mihkel的答案来解决这个问题。然而，他的回答忽略了作为边界背景的关键因素。我在控件中命名边框，并在边框中设置模板绑定。然后引用它，以及按钮的背景。我试图将这些更改用粗体显示，但它们只是显示为**，包含在星星中的代码就是变化。

 <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中。当我发布这个部分时，我会以参考的方式将这篇文章归功于此。

XAML中的圆角按钮用于窗口商店应用

2 个答案: