SearchBox Цвет фона

Question

У меня есть форму для добавления объекта. Элементу требуется автор, который может быть поиском, в котором компонент для автора был полем поиска. Также включен код, в котором фон окна поиска станет красным, если пустым в противном случае будет белый цвет. Также есть список предложений. Когда время, когда я выбираю автора в предложениях, окно поиска не меняет цвет. Но когда я нахожу окно поиска, это единственный раз, когда он идет на цвет костюма. Ни один пользователь не хочет наведывать окно поиска каждый раз, чтобы проверить, действительно ли оно или нет.

Вот пример кода:

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

Answer 1

Вы можете добиться этого с фоновым кодом на ваш взгляд, который бы установить фон для красный цвет, который вы ищете, но я бы рекомендовал использовать SDK Behaviors, который вы можете найти nce в вашем проекте 8.1, чтобы установить 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 заключается в том, что вы можете включить изменение цвета, когда элемент управления отображается в поле зрения, а не только при изменении текста.