自适应文本块:根据宽度更改文本。最好是纯XAML溶液
我有一个自适应文本块:根据宽度更改文本。最好是纯XAML溶液,xaml,uwp,uwp-xaml,Xaml,Uwp,Uwp Xaml,我有一个TextBlock,其HorizontalAlignment属性设置为Stretch,希望它根据其宽度的不同值显示不同的文本,例如: VSTS如果宽度
TextBlock
,其HorizontalAlignment
属性设置为Stretch
,希望它根据其宽度的不同值显示不同的文本,例如:
如果宽度<70VSTS
如果70VS Team Services
自适应触发器将是您问题的最佳解决方案,因为一切都基于XAML,但不幸的是,视觉状态只能基于窗口属性应用。 通过对
类进行子类化,您可以将StateTriggerBase
公开给一些传统的触发器情况,例如Internet连接,但是从那里访问运行时依赖对象似乎是不可行的,至少对我来说是这样(我也不是专家) 另一种可能的解决方案是创建自己的视觉状态并根据控件的维度在状态之间跳跃自适应触发器
但所有这些解决方案都有相同的背后逻辑,即:在某个地方,有代码在背后跟踪依赖属性并操纵结果。 这可能是一个错误吗
我提出了一个非常平淡的解决方案,我创建了自己的UserControl,并创建了一个自定义依赖属性,它可以共享三种状态:小、中、大。但在那之后,我意识到我所设想的解决方案并没有我想象的那么有用 理论上,有一个控件公开了一个自定义依赖属性,每当控件大小发生变化时就会设置该属性(同样,我们不能从事件逻辑运行)。只有在dependency属性设置程序中,我才真正为文本框设置了文本。属性设置器定义为private,因此无法从外部设置此用户控件的此属性值。 但是您可以读取它,就像从依赖项属性中所期望的那样 老实说,这个解决方案的目的更多的是迫使我探索创建自定义控件、依赖属性或附加属性的主题,而不是制作一些具有极端价值的东西。但希望你能从中得到一些价值 UserControl: 代码隐藏public sealed partial class TextBox : UserControl { public enum TextBoxOptions { Small = 0, Medium = 1, Big = 2 } public static readonly DependencyProperty TrackingWidthProperty = DependencyProperty.Register( "Dependency", typeof(TextBoxOptions), typeof(TextBox), new PropertyMetadata(false) ); public TextBoxOptions TrackingWidth { get { return (TextBoxOptions)GetValue(TrackingWidthProperty); } private set { if (value == TextBoxOptions.Small) TextBoxRoot.Text = "VSTS"; else if (value == TextBoxOptions.Medium) TextBoxRoot.Text = "VS Team Services"; else TextBoxRoot.Text = "Visual Studio Team Services"; SetValue(TrackingWidthProperty, value); } } public TextBlock() { this.InitializeComponent(); this.DataContext = this; TextBoxRoot.SizeChanged += TextBoxRoot_SizeChanged; } private void TextBoxRoot_SizeChanged(object sender, SizeChangedEventArgs e) { if (TextBoxRoot.ActualWidth < 600) TrackingWidth = TextBoxOptions.Small; else if (TextBoxRoot.ActualWidth < 800) TrackingWidth= TextBoxOptions.Medium; else TrackingWidth = TextBoxOptions.Big; } }
XAML:公共密封部分类文本框:UserControl { 公共枚举TextBoxOptions { 小=0, 中等=1, 大=2 } 公共静态只读从属属性TrackingWidthProperty= 从属属性。寄存器( “依赖性”, 类型(文本框选项), 类型(文本框), 新属性元数据(错误) ); 公共文本框选项跟踪宽度 { 得到 { 返回(TextBoxOptions)GetValue(TrackingWidthProperty); } 专用设备 { 如果(value==TextBoxOptions.Small)TextBoxRoot.Text=“VSTS”; 如果(value==TextBoxOptions.Medium)TextBoxRoot.Text=“VS团队服务”; else TextBoxRoot.Text=“Visual Studio团队服务”; SetValue(TrackingWidthProperty,值); } } 公共文本块() { this.InitializeComponent(); this.DataContext=this; TextBoxRoot.SizeChanged+=TextBoxRoot_SizeChanged; } 私有void TextBoxRoot\u SizeChanged(对象发送方,SizeChangedEventArgs e) { 如果(TextBoxRoot.ActualWidth<600)TrackingWidth=TextBoxOptions.Small; 如果(TextBoxRoot.ActualWidth<800)TrackingWidth=TextBoxOptions.Medium; else TrackingWidth=TextBoxOptions.Big; } }
在用户控制之外:
结果 结论:- 我在你定义的低宽度尺寸上遇到了问题,这就是为什么数字会增加的原因李>
- 像我在用户控件上那样定义数据上下文是我收集到的一个错误,但这是可行的
- 创建自己的控件可以将所有附加逻辑封装在控件本身中。如果需要一组此类元素来共享相同的行为,则不需要公开多个事件处理程序或为它们创建一个公共位置来访问这些处理程序,因为这实际上是它们实现的一部分。
对于几个更复杂的场景,我可以想象,公开几个依赖属性可能非常有用。即使在这种情况下,检查
Dependency属性也会告诉您控件的当前视觉状态,这对于一些非常特殊的情况可能很重要TrackingWidth
<TextBlock HorizontalAlignment="Stretch" TextTrimming="CharacterEllipsis"> <TextBlock.Triggers> <Trigger MaxWidth="70"> <Setter Property="Text" Value="VSTS"/> </Trigger> <Trigger MaxWidth="150"> <Setter Property="Text" Value="VS Team Services"/> </Trigger> <Trigger MinWidth="150"> <Setter Property="Text" Value="Visual Studio Team Services"/> </Trigger> </TextBlock.Triggers> </TextBlock>
public sealed partial class TextBox : UserControl { public enum TextBoxOptions { Small = 0, Medium = 1, Big = 2 } public static readonly DependencyProperty TrackingWidthProperty = DependencyProperty.Register( "Dependency", typeof(TextBoxOptions), typeof(TextBox), new PropertyMetadata(false) ); public TextBoxOptions TrackingWidth { get { return (TextBoxOptions)GetValue(TrackingWidthProperty); } private set { if (value == TextBoxOptions.Small) TextBoxRoot.Text = "VSTS"; else if (value == TextBoxOptions.Medium) TextBoxRoot.Text = "VS Team Services"; else TextBoxRoot.Text = "Visual Studio Team Services"; SetValue(TrackingWidthProperty, value); } } public TextBlock() { this.InitializeComponent(); this.DataContext = this; TextBoxRoot.SizeChanged += TextBoxRoot_SizeChanged; } private void TextBoxRoot_SizeChanged(object sender, SizeChangedEventArgs e) { if (TextBoxRoot.ActualWidth < 600) TrackingWidth = TextBoxOptions.Small; else if (TextBoxRoot.ActualWidth < 800) TrackingWidth= TextBoxOptions.Medium; else TrackingWidth = TextBoxOptions.Big; } }
<UserControl x:Class="VisualStateTrigger.TextBox" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:VisualStateTrigger" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"> <Grid> <TextBox x:Name="TextBoxRoot"/> </Grid> </UserControl>
<Page x:Class="VisualStateTrigger.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:VisualStateTrigger" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"> <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> <Grid> <Grid.RowDefinitions> <RowDefinition Height="*"/> <RowDefinition Height="200"/> <RowDefinition Height="*"/> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="150"/> <ColumnDefinition Width="*"/> <ColumnDefinition Width="150"/> </Grid.ColumnDefinitions> <local:TextBlock Grid.Column="1" Grid.Row="1" x:Name="myTextBox" HorizontalAlignment="Stretch"/> </Grid> </Grid> </Page>