SearchBox背景颜色

时间:2016-01-06 06:56:31

标签: c# windows-runtime windows-8.1 winrt-xaml windows-8.1-universal

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

以下是示例代码:

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);
}

1 个答案:

答案 0 :(得分:0)

你可以在你的视图中使用代码隐藏来实现这一点,这会将背景设置为你想要的红色但是我建议你使用你可以在8.1项目中引用的Behaviors SDK来设置如果文本无效,则控件上的VisualState。您可以按如下方式执行此操作:

<强>动作:

pkgutil

XAML示例:

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,但您想将默认的SearchBox添加到视图中,在设计窗口中右键单击它并转到“编辑模板” - >编辑副本'。它将创建一个默认样式的副本,您可以在其中将根网格的VisualStateGroups替换为上面的那些。

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