WPF按钮样式不显示文本
问题描述:
我是新来的,所以请耐心等待。我现在有Style
。将其粘贴到一个窗口中,以便在操作中看到它。WPF按钮样式不显示文本
<Window.Resources>
<Style x:Key="SelectionButton3"
TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
ClipToBounds="False">
<Grid.RowDefinitions>
<RowDefinition Height="75" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100" />
<ColumnDefinition Width="55" />
</Grid.ColumnDefinitions>
<Border x:Name="TheBorder"
BorderThickness="0,1.5,1.5,1.5"
CornerRadius="3"
Background="SteelBlue"
Height="35"
Grid.Column="1"
Grid.Row="0"
Margin="-31"
BorderBrush="DarkSlateBlue"/>
<Rectangle Name="TheRectangle"
Fill="SteelBlue"
Stroke="DarkSlateBlue"
Grid.Row="0"
Grid.Column="0">
<Rectangle.LayoutTransform>
<RotateTransform Angle="-45" />
</Rectangle.LayoutTransform>
<Rectangle.BitmapEffect>
<DropShadowBitmapEffect ShadowDepth="5" />
</Rectangle.BitmapEffect>
</Rectangle>
<ContentPresenter x:Name="ContentArea"
VerticalAlignment="Center"
HorizontalAlignment="Center"
Content="{Binding Path=Content, RelativeSource={RelativeSource TemplatedParent}}" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver"
Value="True">
<Setter TargetName="TheBorder"
Property="BitmapEffect">
<Setter.Value>
<DropShadowBitmapEffect ShadowDepth="0" />
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="Foreground"
Value="White"/>
<Setter Property="FontFamily"
Value="Segoe UI" />
<Setter Property="FontSize"
Value="20" />
</Style>
<Grid.RowDefinitions>
<RowDefinition Height="20"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="20"/>
<ColumnDefinition Width="250" />
</Grid.ColumnDefinitions>
<Button Grid.Row="1"
Grid.Column="1"
Style="{StaticResource SelectionButton3}"
Margin="0,0,0,5"
Click="Button_Click">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Image Height="35"
Width="35"
Stretch="Fill"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Grid.Column="0"
Margin="32.5,0,0,0"
Source="/app;component/Media/Images/Mail/email.png" />
<TextBlock Text="Email"
Grid.Column="1"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Margin="22,0,0,0"/>
</Grid>
</Button>
我有2个问题:
1)为什么只有部分文字显示出来?
2)如何将Image
和TextBlock
置于Template
中,并将其绑定到它们上?
答
您的文本被剪切的原因是因为您没有为您的ContentPresenter
指定Grid.Row和Grid.Column。这会导致按钮的内容默认为ControlTemplate
上的第0行和第0列,并与您的边距和位置一起使您的按钮元素上的文本块被切断。我猜这可能是你的意图?
<ContentPresenter x:Name="ContentArea"
Grid.Column="0"
Grid.ColumnSpan="2"
Grid.Row="0"
VerticalAlignment="Stretch"
HorizontalAlignment="Stretch"
Content="{Binding Path=Content,
RelativeSource={RelativeSourceTemplatedParent}}" />
现在ContentPresenter
将跨越上ControlTemplate
的电网两列,让你的文字块将有更多的空间来展示自己。
要回答你的第二个问题做How do I put the Image and Textblock in the template and just bind to them?
一种方式,它是继承Button
类,称之为MyImageButton
例如,实施两个新的依赖属性在这个新类叫Image
和Text
。然后,您可以将您的<Image>
和<TextBlock>
放入您的控制模板中,并将它们绑定到新的Image
和Text
属性。然后,您可以实例化MyImageButton
并使用新的属性来设置按钮的图像和文本。
就是这样。谢谢 – CoderForHire 2012-04-10 23:15:47