Question

我有一个文本框的WinRT应用程序控件模板。当控件处于焦点时，我希望背景变灰。下面的代码执行此操作，但是当控件失去焦点时，灰色背景仍然存在。当控件失去焦点时，如何使背景恢复正常？

<ControlTemplate x:Key="GreyFocusTextBox" TargetType="TextBox">
    <Grid>
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="CommonStates">
                <VisualState x:Name="Normal" />
                <VisualState x:Name="PointerOver" />
                <VisualState x:Name="Pressed" />
                <VisualState x:Name="Disabled" />
            </VisualStateGroup>
            <VisualStateGroup x:Name="FocusedStates">
                <VisualState x:Name="Focused">
                    <Storyboard>
                        <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="BackgroundElement" />
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="Unfocused" />
                <VisualState x:Name="PointerFocused" />
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
        <Border x:Name="BackgroundElement" Background="Gray" Grid.ColumnSpan="2" Margin="{TemplateBinding BorderThickness}" Opacity="0" />
        <Border x:Name="BorderElement" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Grid.ColumnSpan="2"/>
        <ScrollViewer x:Name="ContentElement" HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}" HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}" IsTabStop="False" IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}" IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}" IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}" Margin="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}" VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}" VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}" ZoomMode="Disabled"/>
    </Grid>
</ControlTemplate>

Answer 1

似乎文本框没有进入未聚焦状态，因此我只需将Unfocused重命名为Normal＆amp;删除Storyboard并且它有效。下面的代码对我有用。

<ControlTemplate x:Key="GreyFocusTextBox" TargetType="TextBox">
    <Grid>
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="FocusedStates">
                <VisualState x:Name="Focused">
                    <Storyboard>
                        <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="BackgroundElement" />
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="Normal"/>
                <VisualState x:Name="PointerFocused" />
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
        <Border x:Name="BackgroundElement" Background="Gray" Grid.ColumnSpan="2" Margin="{TemplateBinding BorderThickness}" Opacity="0" />
        <Border x:Name="BorderElement" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Grid.ColumnSpan="2"/>
        <ScrollViewer x:Name="ContentElement" HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}" HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}" IsTabStop="False" IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}" IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}" IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}" Margin="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}" VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}" VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}" ZoomMode="Disabled"/>
    </Grid>
</ControlTemplate>

Answer 2

        <VisualStateGroup x:Name="FocusedStates">
            <VisualState x:Name="Focused">
                <Storyboard>
                    <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="BackgroundElement" />
                </Storyboard>
            </VisualState>
            <VisualState x:Name="Unfocused">
                <Storyboard>
                    <DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="BackgroundElement" />
                </Storyboard>
            </VisualState>
            <VisualState x:Name="PointerFocused" />
        </VisualStateGroup>

Answer 3

你应该改变状态Unfocused

VisualStateManager焦点状态在焦点后保持不变

3 个答案: