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 に答える