Question

我想对所有文本框应用相同的宽度。因此，如果屏幕大小发生变化，那么我需要更改文本框的宽度。为此，我想在视觉状态（xaml）的单个setter中应用样式。

我怎样才能做到这一点？

Answer 1

我同意@Chris W，如果我没有误解你的问题，你想为所有TextBox创建一个单一的样式，并且你希望在窗口大小改变时改变这种样式的宽度

如果您坚持以这种方式设计布局，则可以使用VisualStateGroup的默认模板样式创建TextBox，例如：

<Style x:Key="TextBoxStyle" TargetType="TextBox">
    <!--<Setter Property="MinWidth" Value="{ThemeResource TextControlThemeMinWidth}" />-->
    ...
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="TextBox">
                <Grid>
                    <Grid.Resources>
                    ...
                    </Grid.Resources>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="Auto" />
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="*" />
                    </Grid.RowDefinitions>
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                           ...                                
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="ButtonStates">
                           ...
                        </VisualStateGroup>
                        <VisualStateGroup>
                            <VisualState x:Name="Mobile">
                                <VisualState.StateTriggers>
                                    <AdaptiveTrigger MinWindowWidth="0" />
                                </VisualState.StateTriggers>
                                <VisualState.Setters>
                                    <Setter Target="BorderElement.Width" Value="250" />
                                    <Setter Target="HeaderContentPresenter.Width" Value="250" />
                                    <Setter Target="ContentElement.Width" Value="210" />
                                    <Setter Target="PlaceholderTextContentPresenter.Width" Value="250" />
                                </VisualState.Setters>
                            </VisualState>
                            <VisualState x:Name="PC">
                                <VisualState.StateTriggers>
                                    <AdaptiveTrigger MinWindowWidth="600" />
                                </VisualState.StateTriggers>
                                <VisualState.Setters>
                                    <Setter Target="BorderElement.Width" Value="450" />
                                    <Setter Target="HeaderContentPresenter.Width" Value="450" />
                                    <Setter Target="ContentElement.Width" Value="410" />
                                    <Setter Target="PlaceholderTextContentPresenter.Width" Value="450" />
                                </VisualState.Setters>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <Border x:Name="BorderElement" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Grid.ColumnSpan="2" Grid.Row="1" Grid.RowSpan="1" />
                    <ContentPresenter x:Name="HeaderContentPresenter" Grid.ColumnSpan="2" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" Foreground="{ThemeResource TextControlHeaderForeground}" FontWeight="Normal" Margin="0,0,0,8" Grid.Row="0" Visibility="Collapsed" x:DeferLoadStrategy="Lazy" />
                    <ScrollViewer x:Name="ContentElement" AutomationProperties.AccessibilityView="Raw" HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}" HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}" IsTabStop="False" IsHorizontalRailEnabled="{TemplateBinding ScrollVie
                    <ContentControl x:Name="PlaceholderTextContentPresenter" Grid.ColumnSpan="2" Content="{TemplateBinding PlaceholderText}" Foreground="{ThemeResource TextControlPlaceholderForeground}" IsHitTestVisible="False" IsTabStop="False" Margin="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}" Grid.Row="1" />
                    <Button x:Name="DeleteButton" AutomationProperties.AccessibilityView="Raw" BorderThickness="{TemplateBinding BorderThickness}" Grid.Column="1" FontSize="{TemplateBinding FontSize}" IsTabStop="False" Margin="{ThemeResource HelperButtonThemePadding}" MinWidth="34" Grid.Row="1" Style="{StaticResource DeleteButtonStyle}" V
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

您可以在所有文本框中应用此样式，例如：

<TextBox Style="{StaticResource TextBoxStyle}" Height="100" />

如何使用uwp将相同的样式应用于单个setter中的可视状态设置器中的所有文本框

1 个答案: