Question

我刚刚用Control.Template做了一个按钮，现在面临一个问题。因为没有出现“按钮文本”，而是出现了一个垂直滚动条。我的问题是什么？这是我的代码。

<Window.Resources>
        <ControlTemplate x:Key="SelectInputTheme" TargetType="{x:Type TextBox}">
            <Border Background="#2F3136" BorderBrush="#EB761C" x:Name="SelectedBorder"  BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="10">
                <ScrollViewer x:Name="PART_ContentHost"/>
            </Border>
            <ControlTemplate.Triggers>
                <Trigger Property="IsEnabled" Value="True">
                    <Setter Property="Background" Value="#2F3136" TargetName="SelectedBorder" />
                    <Setter Property="Foreground" Value="#808182"/>
                </Trigger>
                <Trigger Property="IsEnabled" Value="False">
                    <Setter Property="BorderBrush" TargetName="SelectedBorder" Value="#A8A8A8"/>
                </Trigger>
                <Trigger Property="IsFocused" Value="True">
                    <Setter Property="Background" Value="#2F3136" TargetName="SelectedBorder" />
                    <Setter Property="Foreground" Value="#808182"/>
                </Trigger>
                <Trigger Property="IsFocused" Value="False">
                    <Setter Property="BorderBrush" TargetName="SelectedBorder" Value="#A8A8A8"/>
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
        <ControlTemplate x:Key="ButtonTemplate1" TargetType="{x:Type Button}">
            <Border Background="#1B1C1D" BorderBrush="#A8A8A8" x:Name="SelectedBorder" 
                    BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="10">
                <ScrollViewer x:Name="PART_ContentHost"/>
            </Border>
            <ControlTemplate.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Background" Value="#FEFEFE" TargetName="SelectedBorder"/>
                    <Setter Property="Foreground" Value="#A8A8A8" />
                    <Setter Property="BorderBrush" Value="#FFFFFF" TargetName="SelectedBorder"/>
                </Trigger>
                <Trigger Property="IsMouseOver" Value="False">
                    <Setter Property="Background" Value="#1B1C1D" TargetName="SelectedBorder"/>
                    <Setter Property="Foreground" Value="#A8A8A8"/>
                    <Setter Property="BorderBrush" Value="#808182" TargetName="SelectedBorder"/>
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
    </Window.Resources>
    <Grid VerticalAlignment="Center" HorizontalAlignment="Center">
        <StackPanel>
            <Image Source="logo.png" Width="145" Height="89"/>
            <TextBlock 
                FontSize="68" Text="S t r i m o" Foreground="#808182" Margin="0,0,5,0" 
                HorizontalAlignment="Center" />
            <TextBox 
                Text="Username" AcceptsReturn="False" Width="543" Height="59" FontSize="30" 
                Padding ="10" Foreground="#A8A8A8" Template="{StaticResource SelectInputTheme}"/>
            <TextBox Margin="10,0,0,0"  Text="Password" Width="543" Height="59" FontSize="30" 
                     Padding ="10" Foreground="#A8A8A8" Template="{StaticResource SelectInputTheme}"/>
            <Button Width="543" Height="59" MaxHeight="59" Template="{StaticResource ButtonTemplate1}" >
                <TextBlock>LOG IN</TextBlock>
            </Button>
        </StackPanel>
    </Grid>

现在我有了这个按钮。

请让我知道哪一个是错误的。预先感谢。

Answer 1

在按钮内容模板ButtonTemplate1中，您使用ScrollViewer作为内容宿主。

<ScrollViewer x:Name="PART_ContentHost"/>

相反，您应该使用ContentPresenter。

<ContentPresenter x:Name="PART_ContentHost"/>

这是经过修改的控制模板。

<ControlTemplate x:Key="ButtonTemplate1"
                 TargetType="{x:Type Button}">
    <Border x:Name="SelectedBorder"
            Background="#1B1C1D"
            BorderBrush="#A8A8A8" 
            BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="10">
        <ContentPresenter x:Name="PART_ContentHost"
                          HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                          VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
    </Border>
    <ControlTemplate.Triggers>
        <Trigger Property="IsMouseOver"
                 Value="True">
            <Setter Property="Background"
                    Value="#FEFEFE"
                    TargetName="SelectedBorder"/>
            <Setter Property="Foreground"
                    Value="#A8A8A8" />
            <Setter Property="BorderBrush"
                    Value="#FFFFFF"
                    TargetName="SelectedBorder"/>
        </Trigger>
        <Trigger Property="IsMouseOver"
                 Value="False">
            <Setter Property="Background"
                    Value="#1B1C1D"
                    TargetName="SelectedBorder"/>
            <Setter Property="Foreground"
                    Value="#A8A8A8"/>
            <Setter Property="BorderBrush"
                    Value="#808182"
                    TargetName="SelectedBorder"/>
        </Trigger>
    </ControlTemplate.Triggers>
</ControlTemplate>

附加的HorizontalAlignment和VerticalContentAlignment绑定将应用应用模板的按钮的值。

Answer 2

如果不想使用模板，为什么要在模板中放置<ScrollViewer />元素？

用ContentPresenter替换它，并确保将其HorizontalAlignment和VerticalAlignment属性绑定到模板化{{1}的HorizontalContentAlignment和VerticalContentAlignment }：

Button

如何删除XAML WPF按钮中的垂直滚动条？

2 个答案: