1

我有一个添加项目的表格。该项目需要一个可以搜索的作者，其中作者的组件是一个搜索框。还包括一个代码，其中搜索框的背景在为空时将变为红色，否则为白色。还有一份建议清单。当我在建议中选择作者时，搜索框不会变成颜色。但是当我将搜索框悬停时，这是唯一一次它变成了装扮的颜色。没有用户希望每次都悬停搜索框来查看它是否有效。

这是一个示例代码：

XAML

<SearchBox x:Name="SearchBoxColor" SearchHistoryEnabled="False" SuggestionsRequested="SearchBoxColor_SuggestionsRequested" QueryChanged="SearchBoxColor_QueryChanged" QuerySubmitted="SearchBoxColor_QuerySubmitted" Background="White" />
<Button Content="Turn Color"Click="ButtonColor_Click" />

CS

private void SearchBoxColor_SuggestionsRequested(SearchBox sender, SearchBoxSuggestionsRequestedEventArgs args) {
    // When this event is called the background will change instantly
    ChangeSearchBoxColor();
}

private void SearchBoxColor_QueryChanged(SearchBox sender, SearchBoxQueryChangedEventArgs args) {
    // When this event is called the background will change instantly
    ChangeSearchBoxColor();
}

private void SearchBoxColor_QuerySubmitted(SearchBox sender, SearchBoxQuerySubmittedEventArgs args) {
    // When this event is called the background will change instantly
    ChangeSearchBoxColor();
}

private void ButtonColor_Click(object sender, RoutedEventArgs e) {
    // When this event is called the background will change only when the search box is hovered
    ChangeSearchBoxColor();
}

private void ChangeSearchBoxColor() {
    SearchBoxColor.Background = new SolidColorBrush(Colors.Red);
}
4

1 回答 1

0

您可以在视图上使用代码隐藏来实现此目的，这会将背景设置为您正在寻找的红色，但是我建议使用您可以在 8.1 项目中引用的 Behaviors SDK 来设置 VisualState控制文本是否无效。您可以按如下方式执行此操作：

行动：

public class SearchBoxTextErrorVisualStateAction : DependencyObject, IAction
{
    public static readonly DependencyProperty ErrorVisualStateProperty = DependencyProperty.Register(
        "ErrorVisualState",
        typeof(string),
        typeof(SearchBoxTextErrorVisualStateAction),
        new PropertyMetadata(string.Empty));

    public string ErrorVisualState
    {
        get
        {
            return (string)this.GetValue(ErrorVisualStateProperty);
        }
        set
        {
            this.SetValue(ErrorVisualStateProperty, value);
        }
    }

    public static readonly DependencyProperty ValidVisualStateProperty =
        DependencyProperty.Register(
            "ValidVisualState",
            typeof(string),
            typeof(SearchBoxTextErrorVisualStateAction),
            new PropertyMetadata(string.Empty));

    public string ValidVisualState
    {
        get
        {
            return (string)this.GetValue(ValidVisualStateProperty);
        }
        set
        {
            this.SetValue(ValidVisualStateProperty, value);
        }
    }

    public object Execute(object sender, object parameter)
    {
        var searchBox = sender as SearchBox;

        if (searchBox != null)
        {
            VisualStateManager.GoToState(
                searchBox,
                string.IsNullOrWhiteSpace(searchBox.QueryText) ? this.ErrorVisualState : this.ValidVisualState,
                true);
        }

        return parameter;
    }
}

XAML 示例：

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Grid.Resources>
        <Color x:Key="AppErrorColor">#FFD32F2F</Color>
        <SolidColorBrush x:Key="ThemeErrorShade" Color="{ThemeResource AppErrorColor}" />

        <Style x:Key="SearchBoxStyle" TargetType="SearchBox">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="SearchBox">
                        <Grid x:Name="SearchBoxGrid">
                            ...

                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="SearchBoxGrid">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{Binding Background, RelativeSource={RelativeSource Mode=TemplatedParent}}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="SearchBoxBorder">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{Binding BorderBrush, RelativeSource={RelativeSource Mode=TemplatedParent}}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="SearchButton">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{Binding Foreground, RelativeSource={RelativeSource Mode=TemplatedParent}}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Disabled">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="SearchBoxGrid">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SearchBoxDisabledBackgroundThemeBrush}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="SearchBoxBorder">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SearchBoxDisabledBorderThemeBrush}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="SearchButton">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SearchBoxDisabledTextThemeBrush}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="SearchTextBox">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="Transparent"/>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="ErrorStates">
                                    <VisualState x:Name="TextInvalid">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="SearchBoxGrid">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ThemeErrorShade}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="TextValid">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="SearchBoxGrid">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{Binding Background, RelativeSource={RelativeSource Mode=TemplatedParent}}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="SearchBoxBorder">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{Binding BorderBrush, RelativeSource={RelativeSource Mode=TemplatedParent}}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="SearchButton">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{Binding Foreground, RelativeSource={RelativeSource Mode=TemplatedParent}}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>

                            ...
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Grid.Resources>

    <SearchBox Style="{StaticResource SearchBoxStyle}">
        <interactivity:Interaction.Behaviors>
            <core:EventTriggerBehavior EventName="Loaded">
                <core:EventTriggerBehavior.Actions>
                    <actions:SearchBoxTextErrorVisualStateAction ErrorVisualState="TextInvalid" ValidVisualState="TextValid" />
                </core:EventTriggerBehavior.Actions>
            </core:EventTriggerBehavior>
            <core:EventTriggerBehavior EventName="QueryChanged">
                <core:EventTriggerBehavior.Actions>
                    <actions:SearchBoxTextErrorVisualStateAction ErrorVisualState="TextInvalid" ValidVisualState="TextValid" />
                </core:EventTriggerBehavior.Actions>
            </core:EventTriggerBehavior>
        </interactivity:Interaction.Behaviors>
    </SearchBox>
</Grid>

由于答案的限制，我无法粘贴整个 XAML，但您想将默认的 SearchBox 添加到您的视图中，在设计窗口中，右键单击它并转到“编辑模板 -> 编辑副本”。它将创建默认样式的副本，您可以在其中将根网格的 VisualStateGroups 替换为上面的样式。

编辑：在 Loaded 事件上触发操作的原因是，您可以在控件进入视图时启用颜色更改，而不仅仅是在文本更改时。

于 2016-01-06T10:34:50.910 回答