Question

我是WPF的新手，也许很简单。我无法弄清楚为什么BorderBrush未在移除Button上展示。 Button默认情况下不可见，但在鼠标位于Button上方时显示。当鼠标悬停在Button基础TextBlock时，应该显示，但没有Border。

有没有人建议我如何查看按钮的Border。

以下是我的XAML：

<Window x:Class="WpfApplication1.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="150" Width="325">
<Window.Resources>
    <Storyboard x:Key="MakeToolbarVisible">
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)">
            <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0.5"/>
        </DoubleAnimationUsingKeyFrames>
    </Storyboard>
    <Storyboard x:Key="MakeToobarHidden">
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)">
            <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0"/>
        </DoubleAnimationUsingKeyFrames>
    </Storyboard>
    <Style x:Key="Toolbar">
        <Style.Triggers>
            <Trigger Property="UIElement.IsMouseOver" Value="True">
                <Trigger.ExitActions>
                    <BeginStoryboard Storyboard="{StaticResource MakeToobarHidden}"/>
                </Trigger.ExitActions>
                <Trigger.EnterActions>
                    <BeginStoryboard Storyboard="{StaticResource MakeToolbarVisible}"/>
                </Trigger.EnterActions>
            </Trigger>
        </Style.Triggers>
    </Style>
</Window.Resources>
<Grid>
    <Border>
        <Grid Margin="0">
            <Grid.RowDefinitions>
                <RowDefinition/>
                <RowDefinition Height="30"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition/>
                <ColumnDefinition Width="30" />
            </Grid.ColumnDefinitions>

            <TextBlock Text="enter some text here!" Margin="8,19.058,8,0" VerticalAlignment="Top" Foreground="#B43C1C26" HorizontalAlignment="Right"/>
            <TextBox TextWrapping="WrapWithOverflow" Margin="8,19.058,0,2.463" FontSize="11" AcceptsReturn="True" AcceptsTab="True" Visibility="Visible" BorderThickness="0" Background="{x:Null}"/>
            <WrapPanel Grid.Row="1" Margin="8,8,8,8">
                <TextBlock Text="29.8.1995" Foreground="#B43C1C26" FontSize="10" />
            </WrapPanel>

            <StackPanel Grid.Column="1" Margin="5,5,5,8" Grid.RowSpan="2" Opacity="0" Style="{StaticResource Toolbar}">
                <Button x:Name="Remove" BorderBrush="DarkRed" BorderThickness="1" Cursor="Hand">
                    <Button.Template>
                        <ControlTemplate>
                            <TextBlock Text="r" FontFamily="Marlett" FontSize="12"/>
                        </ControlTemplate>
                    </Button.Template>
                </Button>
            </StackPanel>
        </Grid>
    </Border>
</Grid>

Answer 1

通过设置Buttons ControlTemplate，将Buttons默认模板替换为没有边框的模板。

要显示边框，请将其添加到ControlTemplate中，如下所示：

        <StackPanel Grid.Column="1" Margin="5,5,5,8" Grid.RowSpan="2" Opacity="0" Style="{StaticResource Toolbar}">
            <Button x:Name="Remove" BorderBrush="DarkRed" BorderThickness="1" Cursor="Hand">
                <Button.Template>
                    <ControlTemplate>
                        <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
                             <TextBlock Text="r" FontFamily="Marlett" FontSize="12"/>
                        </Border>
                    </ControlTemplate>
                </Button.Template>
            </Button>
        </StackPanel>

通过TemplateBinding，您可以绑定到模板化控件的属性，在本例中为Button的属性。

Answer 2

您已覆盖ControlTemplate的{{1}}，因此您将失去默认的按钮模板。

根据您的代码，我可以看到您要为按钮中的文本设置Button和FontFamily，而不必像这样覆盖模板 -

FontSize

Answer 3

如果您希望按钮看起来像常规按钮，则不应该将其取消只需设置您想要更改的属性：

  <StackPanel Grid.Column="1" Margin="5,5,5,8" Grid.RowSpan="2" Opacity="0" Style="{StaticResource Toolbar}">
     <Button x:Name="Remove" BorderBrush="DarkRed" BorderThickness="1" Cursor="Hand"
                            FontSize="12" FontFamily="Marlett" Content="r"/>

   </StackPanel>

按钮上没有显示边框

3 个答案: