app.xaml 中的 WPF 按钮模板如何在 MainWindow.xaml 中设置文本答案

【问题标题】：WPF button template in app.xaml how to set the text in MainWindow.xamlapp.xaml 中的 WPF 按钮模板如何在 MainWindow.xaml 中设置文本
【发布时间】：2014-10-24 09:59:21
【问题描述】：

我在 app.xaml 文件中创建了一个玻璃按钮（本文底部的代码）。我有几个按钮在 mainwindox.xaml 中引用了这个模板。我不知道如何设置按钮从主窗口中显示的文本。下面的第一段代码是其中一个按钮的示例。我需要在某处添加一些代码，以便按钮上有文本“相关性”。

下面的主窗口代码

 <Button Grid.Column="0" Grid.Row="1" Style="{StaticResource buttBasicTemplateReport}" Command="{Binding CommandButtReportsCorrel}" Height="50" Width="120" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0,0,0,0"/>

App.xaml 代码如下

         <!-- Glass Button empty template Report -->
    <Style x:Key="buttBasicTemplateReport" TargetType="Button">
        <Setter Property="Cursor" Value="Hand"/>
        <Setter Property="FontSize" Value="12" />
        <Setter Property="Foreground" Value="White"/>
        <Setter Property="FontWeight" Value="Bold"/>
        <Setter Property="VerticalAlignment" Value="Center"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Border x:Name="ButtonBorder" 
                              CornerRadius="15,15,15,15" 
                              BorderThickness="3,3,3,3" 
                              Background="#AA000000"  
                              BorderBrush="#99FFFFFF"
                              RenderTransformOrigin="0.5,0.5">
                        <Grid>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="*"/>
                                <RowDefinition Height="1.7*"/>
                            </Grid.RowDefinitions>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition/>
                                <ColumnDefinition/>
                            </Grid.ColumnDefinitions>
                            <Border Grid.Row="0" Grid.ColumnSpan="2" CornerRadius="23,23,0,0">
                                <Border.Background>
                                    <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                                        <GradientStop Color="#08FFFFFF" Offset="0"/>
                                        <GradientStop Color="#88FFFFFF" Offset="1"/>
                                    </LinearGradientBrush>
                                </Border.Background>
                            </Border>
                            <ContentPresenter x:Name="ButtonContentPresenter"
                            VerticalAlignment="Center"  
                            Grid.RowSpan="2" 
                            HorizontalAlignment="Center"/>
                            <Rectangle x:Name="recGlow"  Style="{StaticResource recSecurity}"
                                       Grid.Row="0" Grid.RowSpan="2" Grid.Column="0" Grid.ColumnSpan="2"/>
                            <TextBlock Grid.Row="0" Grid.RowSpan="2" Grid.ColumnSpan="2" VerticalAlignment="Center" HorizontalAlignment="Center" Style="{StaticResource txtSecurity}"/>
                        </Grid>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver"  Value="True">
                            <Setter TargetName="recGlow" Property="Opacity" Value="0.8"/>
                            <Setter Property="RenderTransform" TargetName="ButtonBorder">
                                <Setter.Value>
                                    <TransformGroup>
                                        <ScaleTransform ScaleX="1" ScaleY="1"/>
                                    </TransformGroup>
                                </Setter.Value>
                            </Setter>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

【问题讨论】：

标签： c# wpf xaml

【解决方案1】：

当您制作自定义按钮时，如果您想要 onClick 效果，您需要使用 ContentControl 和 Triggers。还要回答评论者的问题，当您制作自定义按钮时，您需要将边距绑定到填充属性以使您的按钮内容居中。

你可以看到这个链接：

WPF: Why shouldn't I use {TemplateBinding Margin} in ControlTemplate - is Margin meant only for element's containers?

你也可以看到这个：

http://sshumakov.com/2013/02/19/how-to-bind-to-control-properties-from-controltemplate/

【讨论】：

【解决方案2】：

Button 是ContentControl。如我所见，您的Template 中有一个ContentPresenter。因此，您可以将Content 属性添加到您的Button 或添加Contnet 元素。

按属性：

<Button Content="Correlation"/>

按元素：

<Button>Correlation</Button>

【讨论】：

当我添加 Content="Correlation" 时，由于某种原因，按钮显示“Correlati”，文本没有居中。当文本到达按钮中间时出现，其余文本不可见
因为您已经为您的Button 明确设置了Width="120"，这不足以适应该文本。
是的，当然你的权利，我现在可以看到所有的文字。但是文本显示在按钮的左侧居中，而不是在整个按钮中居中