我在其他控件的网格中放置了一个模板化按钮,其中包含一些内容(图像和文本 block ):
<SomeControl>
<Grid>
<SpecialButton/>
</Grid>
</SomeControl>
<Style TargetType="{x:Type local:SpecialButton}">>
...
<Setter Property="Template">
<Setter.Value>
...
<TextBlock/>
<TextBlock/>
</Setter.Value>
</Style>
“SomeControl”控件的宽度是动态的 - 也就是说 - 它可以根据屏幕宽度、容器宽度等动态更改。因此我使用另一种方法来计算“SpecialButton”的宽度。
只要按钮内的 TextBlock 不比按钮本身宽,“SpecialButton”的大小就与它的“SomeControl”容器完美匹配。
但是,如果 TextBlock 的文本比“SpecialButton”的宽度长,“SpecialButton”右边框就会消失,并且按钮看起来非常糟糕。话虽这么说,“SpecialButton”的宽度仍然受限于其容器的宽度,尽管绘图没有被很好地计算。
我试图找到一种方法来限制 TextBlock 的(或者更好的是完整的 Grid 的宽度)而不定义绝对宽度,因此“SpecialButton”仍然会很好地绘制并忽略它的子溢出。像 CSS 的 {overflow:hidden} 这样的东西会很棒......
注意:
我不能允许换行,因为“SpecialButton”高度也受到限制(并手动计算)。
最佳答案
一旦您习惯了,WPF 元素中的宽度(和高度)就非常简单了。默认情况下,您的网格设置为自动宽度,这意味着它将请求父级宽度的 100%。
我通常不会设置最大大小,而是将需要动态调整大小和位置的项目放入网格中,并设置网格行和列的大小。因此,如果我想让某些东西占据可用水平空间的 1/3,我可以有一个包含两列的网格,一列的宽度设置为“1*”,另一列设置为“2*”(2/3 是两倍1/3 的大小),并将我的项目放在第 1 列中,设置为占用所有可用宽度。
在您的情况下,文本需要被截断,因为它正在尽最大努力呈现所有文本,并且将按钮延伸到其容器的边界之外来执行此操作。内置修剪功能有两个选项。 TextTrimming="CharacterEllipsis"
和 TextTrimming="WordEllipsis"
只需将其放入文本 block 中即可。我会将文本 block 放入某种容器中以将它们分开。如果第一个内容足够长,它可能会将另一个完全推到一边。
元素大小调整
<Window
x:Class="MainWindow"
x:Name="Window"
Title="MainWindow"
Width="640" Height="480">
<Grid x:Name="LayoutRoot" DataContext="{Binding}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="2*"/>
</Grid.ColumnDefinitions>
<local:SomeControl Margin="8,8,8,0"/>
</Grid>
</Window>
文本修剪
<ControlTemplate x:Key="ButtonBaseControlTemplate1" TargetType="{x:Type ButtonBase}">
<Microsoft_Windows_Themes:ButtonChrome x:Name="Chrome" BorderBrush="{TemplateBinding BorderBrush}" Fill="{TemplateBinding Background}" RenderMouseOver="{TemplateBinding IsMouseOver}" RenderPressed="{TemplateBinding IsPressed}" RenderDefaulted="{TemplateBinding Button.IsDefaulted}" SnapsToDevicePixels="True" ThemeColor="Metallic">
<TextBlock Text="{TemplateBinding Content}" TextTrimming="WordEllipsis" HorizontalAlignment="Center" VerticalAlignment="Center" />
</Microsoft_Windows_Themes:ButtonChrome>
<ControlTemplate.Triggers>
<Trigger Property="IsKeyboardFocused" Value="True">
<Setter Property="RenderDefaulted" TargetName="Chrome" Value="True"/>
</Trigger>
<Trigger Property="ToggleButton.IsChecked" Value="True">
<Setter Property="RenderPressed" TargetName="Chrome" Value="True"/>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
此外,您可能还想将文本框的工具提示设置为文本的值。如果文本被截断并且用户想要查看它是什么,他们可以将鼠标悬停在按钮上并找出答案。
关于wpf - 限制其容器内的 WPF 元素宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9229778/