Windows 10 通用Windows平台中文本框的样式_Windows 10_Win Universal App

Windows 10 通用Windows平台中文本框的样式

windows-10

Windows 10 通用Windows平台中文本框的样式,windows-10,win-universal-app,Windows 10,Win Universal App,如果文本框是只读的，我需要更改文本框的背景色在WPF中，我有以下风格： <Style TargetType="TextBox"> <Setter Property="Background" Value="{StaticResource ControlBackgroundColorBrush}" /> <Setter Property="Foreground" Value="{StaticResource PrimaryColorBrush}

如果文本框是只读的，我需要更改文本框的背景色

在WPF中，我有以下风格：

    <Style TargetType="TextBox">
    <Setter Property="Background" Value="{StaticResource ControlBackgroundColorBrush}" />
    <Setter Property="Foreground" Value="{StaticResource PrimaryColorBrush}" />
    <Setter Property="BorderBrush" Value="{StaticResource SecondaryColorBrush}" />
    <Setter Property="VerticalContentAlignment" Value="Center" />
    <Setter Property="IsReadOnlyCaretVisible" Value="False" />
    <Setter Property="Validation.ErrorTemplate" Value="{StaticResource DefaultErrorTemplate}" />
    <Style.Triggers>
        <Trigger Property="IsReadOnly" Value="True">
            <Setter Property="BorderBrush" Value="{StaticResource ControlBackgroundColorBrush}" />
            <Setter Property="IsHitTestVisible" Value="False" />
        </Trigger>
        <Trigger Property="Validation.HasError" Value="True">
            <Setter Property="ToolTip" Value="{Binding RelativeSource={x:Static RelativeSource.Self},Path=(Validation.Errors)[0].ErrorContent}" />
        </Trigger>
    </Style.Triggers>
</Style>

但在UWP中是样式。触发器不可用。我试图用VisualState解决这个问题。我得到了一个TextBox模板（来自Blend）并对其进行了操作，但它不起作用。下面是我对文本框的风格：

<Style TargetType="TextBox">
    <Setter Property="MinWidth" Value="{ThemeResource TextControlThemeMinWidth}" />
    <Setter Property="MinHeight" Value="{ThemeResource TextControlThemeMinHeight}" />
    <Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}" />
    <Setter Property="Background" Value="{ThemeResource SystemControlBackgroundAltHighBrush}" />
    <Setter Property="BorderBrush" Value="{ThemeResource SystemControlForegroundChromeDisabledLowBrush}" />
    <Setter Property="SelectionHighlightColor" Value="{ThemeResource SystemControlHighlightAccentBrush}" />
    <Setter Property="BorderThickness" Value="{ThemeResource TextControlBorderThemeThickness}" />
    <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
    <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
    <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Hidden" />
    <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Hidden" />
    <Setter Property="ScrollViewer.IsDeferredScrollingEnabled" Value="False" />
    <Setter Property="Padding" Value="{ThemeResource TextControlThemePadding}" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="TextBox">
                <Grid>
                    <Grid.Resources>
                        <Storyboard x:Name="Storyboard1" />
                    </Grid.Resources>
                    <Grid.Background>
                        <StaticResource ResourceKey="ControlBackgroundColorBrush" />
                    </Grid.Background>
                    <Grid.BorderBrush>
                        <StaticResource ResourceKey="ControlBackgroundColorBrush" />
                    </Grid.BorderBrush>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="Auto" />
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="*" />
                    </Grid.RowDefinitions>
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">

                            <VisualState x:Name="Normal" />

                            <VisualState x:Name="ReadOnly">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="PlaceholderTextContentPresenter">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource HighlightColorBrush}" />
                                    </ObjectAnimationUsingKeyFrames>

                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="BackgroundElement">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlBackgroundChromeWhiteBrush}" />
                                    </ObjectAnimationUsingKeyFrames>

                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="BackgroundElement">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlBackgroundFocusedOpacity}" />
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>

                            </VisualState>
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="ButtonStates">

                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <Border x:Name="BackgroundElement" Background="{TemplateBinding Background}" Grid.ColumnSpan="2" Margin="{TemplateBinding BorderThickness}" Opacity="{ThemeResource TextControlBackgroundRestOpacity}" Grid.Row="1" Grid.RowSpan="1" />
                    <Border x:Name="BorderElement" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Grid.ColumnSpan="2" Grid.Row="1" Grid.RowSpan="1" />
                    <ContentPresenter x:Name="HeaderContentPresenter" Grid.ColumnSpan="2" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" Foreground="{ThemeResource SystemControlForegroundBaseHighBrush}" FontWeight="Normal" Margin="0,0,0,8" Grid.Row="0" Visibility="Collapsed" x:DeferLoadStrategy="Lazy" />
                    <Border x:Name="ContentElement" AutomationProperties.AccessibilityView="Raw" ScrollViewer.HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}" ScrollViewer.HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}" ScrollViewer.IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}" ScrollViewer.IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}" ScrollViewer.IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}" Padding="{TemplateBinding Padding}" Grid.Row="1" ScrollViewer.VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}" ScrollViewer.VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}" ScrollViewer.ZoomMode="Disabled" />
                    <ContentControl x:Name="PlaceholderTextContentPresenter" Grid.ColumnSpan="2" Content="{TemplateBinding PlaceholderText}" Foreground="{ThemeResource SystemControlPageTextBaseMediumBrush}" IsHitTestVisible="False" IsTabStop="False" Margin="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}" Grid.Row="1" />
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

<VisualStateGroup x:Name="CommonStates">    
    <VisualState x:Name="Disabled">
     <!--Here your style for disabled TextBox-->
    </VisualState>
</VisualStateGroup>

您知道如何解决这个问题吗？

例如，您可以创建自己的自定义TextBox控件，该控件继承自

TextBox

，并在Overrided

OnApplyTemplate

方法中选中

IsReadOnly

属性，如下所示：

public class CustomTextBox : TextBox
{
    protected override void OnApplyTemplate()
    {
        base.OnApplyTemplate();

        if (IsReadOnly)
        {
            Background = new SolidColorBrush(Colors.Red); //eg. set Background to Red
            IsHitTestVisible = false; //Additionally you can set IsHitTestVisible if it should be really readonly
        }
    }
}

并在xaml中使用新控件：

 <local:CustomTextBox Width="200"
                         Height="50"
                         IsReadOnly="True" />

文本框中没有内置的“只读”可视状态。但您可以添加自己的VisualState组，其中包含VisualState，然后使用StateTrigger

<Style TargetType="TextBox">
    ...
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="TextBox">
                <Grid>
                    ...
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Disabled">
                                ...
                            </VisualState>
                            <VisualState x:Name="Normal" />
                            <VisualState x:Name="PointerOver">
                                ...
                            </VisualState>
                            <VisualState x:Name="Focused">
                                ...
                            </VisualState>
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="ButtonStates">
                            <VisualState x:Name="ButtonVisible">
                                ...
                            </VisualState>
                            <VisualState x:Name="ButtonCollapsed" />
                        </VisualStateGroup>
                        <VisualStateGroup>
                            <VisualState>
                                <VisualState.StateTriggers>
                                    <StateTrigger IsActive="{Binding IsReadOnly, RelativeSource={RelativeSource TemplatedParent}, Mode=OneWay}"/>
                                </VisualState.StateTriggers>
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="PlaceholderTextContentPresenter">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource HighlightColorBrush}" />
                                    </ObjectAnimationUsingKeyFrames>

                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="BackgroundElement">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlBackgroundChromeWhiteBrush}" />
                                    </ObjectAnimationUsingKeyFrames>

                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="BackgroundElement">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlBackgroundFocusedOpacity}" />
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    ...
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>


...
...
...
...
...
...
...

尝试文本框的“IsEnabled”标志，以获得所需的效果。您需要文本框的样式“禁用”视觉状态：

<Style TargetType="TextBox">
    <Setter Property="MinWidth" Value="{ThemeResource TextControlThemeMinWidth}" />
    <Setter Property="MinHeight" Value="{ThemeResource TextControlThemeMinHeight}" />
    <Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}" />
    <Setter Property="Background" Value="{ThemeResource SystemControlBackgroundAltHighBrush}" />
    <Setter Property="BorderBrush" Value="{ThemeResource SystemControlForegroundChromeDisabledLowBrush}" />
    <Setter Property="SelectionHighlightColor" Value="{ThemeResource SystemControlHighlightAccentBrush}" />
    <Setter Property="BorderThickness" Value="{ThemeResource TextControlBorderThemeThickness}" />
    <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
    <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
    <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Hidden" />
    <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Hidden" />
    <Setter Property="ScrollViewer.IsDeferredScrollingEnabled" Value="False" />
    <Setter Property="Padding" Value="{ThemeResource TextControlThemePadding}" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="TextBox">
                <Grid>
                    <Grid.Resources>
                        <Storyboard x:Name="Storyboard1" />
                    </Grid.Resources>
                    <Grid.Background>
                        <StaticResource ResourceKey="ControlBackgroundColorBrush" />
                    </Grid.Background>
                    <Grid.BorderBrush>
                        <StaticResource ResourceKey="ControlBackgroundColorBrush" />
                    </Grid.BorderBrush>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="Auto" />
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="*" />
                    </Grid.RowDefinitions>
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">

                            <VisualState x:Name="Normal" />

                            <VisualState x:Name="ReadOnly">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="PlaceholderTextContentPresenter">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource HighlightColorBrush}" />
                                    </ObjectAnimationUsingKeyFrames>

                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="BackgroundElement">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlBackgroundChromeWhiteBrush}" />
                                    </ObjectAnimationUsingKeyFrames>

                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="BackgroundElement">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlBackgroundFocusedOpacity}" />
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>

                            </VisualState>
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="ButtonStates">

                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <Border x:Name="BackgroundElement" Background="{TemplateBinding Background}" Grid.ColumnSpan="2" Margin="{TemplateBinding BorderThickness}" Opacity="{ThemeResource TextControlBackgroundRestOpacity}" Grid.Row="1" Grid.RowSpan="1" />
                    <Border x:Name="BorderElement" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Grid.ColumnSpan="2" Grid.Row="1" Grid.RowSpan="1" />
                    <ContentPresenter x:Name="HeaderContentPresenter" Grid.ColumnSpan="2" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" Foreground="{ThemeResource SystemControlForegroundBaseHighBrush}" FontWeight="Normal" Margin="0,0,0,8" Grid.Row="0" Visibility="Collapsed" x:DeferLoadStrategy="Lazy" />
                    <Border x:Name="ContentElement" AutomationProperties.AccessibilityView="Raw" ScrollViewer.HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}" ScrollViewer.HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}" ScrollViewer.IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}" ScrollViewer.IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}" ScrollViewer.IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}" Padding="{TemplateBinding Padding}" Grid.Row="1" ScrollViewer.VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}" ScrollViewer.VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}" ScrollViewer.ZoomMode="Disabled" />
                    <ContentControl x:Name="PlaceholderTextContentPresenter" Grid.ColumnSpan="2" Content="{TemplateBinding PlaceholderText}" Foreground="{ThemeResource SystemControlPageTextBaseMediumBrush}" IsHitTestVisible="False" IsTabStop="False" Margin="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}" Grid.Row="1" />
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

<VisualStateGroup x:Name="CommonStates">    
    <VisualState x:Name="Disabled">
     <!--Here your style for disabled TextBox-->
    </VisualState>
</VisualStateGroup>

并将“IsEnabled”设置为false

或者将触发器用作@nicetry responsed

真的吗？没有人有任何想法？？？我不知道默认情况下“ReadOnly”是连接的，您可能只需要将其添加到控件的方法中。