2013-11-13 2 views
2

Я интересно, если есть более простой способ изменить только один атрибут, то рестайлинг весь ControlTemplate в Windows Phone 8.Styling TextBox/PasswordBox в XAML

Недавно я нашел себя в необходимости изменить фон PasswordBox (в фон, отображаемый при выборе/вводе в него) без изменения чего-либо еще. Я знаю, что есть способ воссоздать весь ControlTemplate (поскольку он ОГРОМНЫЙ по моему вкусу, и я немного теряюсь в нем - я новичок).

Есть ли другие (желательно более простые) варианты, как это сделать? Если да, то какой?

Причина, по которой я прошу, заключается в том, что я создаю приложение, которое должно выглядеть примерно так же на Android, iOS и Windows Phone (android & Приложения iOS сделаны кем-то другим, я работаю над WP Приложение и дизайн даны).

Приложение должно выглядеть так же, как тема, выбранная пользователем на его телефоне.

И поскольку текст является белым и темным текстом при записи в TextBox/PasswordBox, фон также изменяется на белый - в результате вы не можете видеть, что печатаете.

Example

Это проще изменить "переднего плана, когда-типизации" или "фона, когда-типизации"? Как это сделать без воссоздания всего ControlTemplate?

+0

Фоновая собственность должна быть в порядке. Фон = "yourColor" в XAML. – VasileF

+0

Свойство фона не решает мою проблему. Мне нужно изменить «background-when-typing», а не только фон. – mishan

+0

Когда вы печатаете, это означает, что элемент управления сфокусирован. Поэтому при событии GotFocus измените фон. В LostFocus вернитесь к исходному фону. Или этого недостаточно? – VasileF

ответ

6

Способ сделать это с повторным и неявным стилем.

Не бойтесь. Это просто, видите, вот что вы после:

<phone:PhoneApplicationPage.Resources> 
<Style TargetType="TextBox"> 
    <Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilyNormal}"/> 
    <Setter Property="FontSize" Value="{StaticResource PhoneFontSizeMediumLarge}"/> 
    <Setter Property="Background" Value="Black"/> 
    <Setter Property="Foreground" Value="White"/> 
    <Setter Property="BorderBrush" Value="White"/> 
    <Setter Property="SelectionBackground" Value="White"/> 
    <Setter Property="SelectionForeground" Value="Black"/> 
    <Setter Property="CaretBrush" Value="White"/> 
    <Setter Property="BorderThickness" Value="{StaticResource PhoneBorderThickness}"/> 
    <Setter Property="Padding" Value="2"/> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="TextBox"> 
       <Grid Background="Transparent"> 
        <VisualStateManager.VisualStateGroups> 
         <VisualStateGroup x:Name="CommonStates"> 
          <VisualState x:Name="Normal"/> 
          <VisualState x:Name="MouseOver"/> 
          <VisualState x:Name="Disabled"> 
           <Storyboard> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="MainBorder"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="Transparent"/> 
            </ObjectAnimationUsingKeyFrames> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="MainBorder"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/> 
            </ObjectAnimationUsingKeyFrames> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentElement"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/> 
            </ObjectAnimationUsingKeyFrames> 
           </Storyboard> 
          </VisualState> 
          <VisualState x:Name="ReadOnly"> 
           <Storyboard> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="MainBorder"> 
             <DiscreteObjectKeyFrame KeyTime="0"> 
              <DiscreteObjectKeyFrame.Value> 
               <Visibility>Collapsed</Visibility> 
              </DiscreteObjectKeyFrame.Value> 
             </DiscreteObjectKeyFrame> 
            </ObjectAnimationUsingKeyFrames> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="ReadonlyBorder"> 
             <DiscreteObjectKeyFrame KeyTime="0"> 
              <DiscreteObjectKeyFrame.Value> 
               <Visibility>Visible</Visibility> 
              </DiscreteObjectKeyFrame.Value> 
             </DiscreteObjectKeyFrame> 
            </ObjectAnimationUsingKeyFrames> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ReadonlyBorder"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneTextBoxBrush}"/> 
            </ObjectAnimationUsingKeyFrames> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ReadonlyBorder"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneTextBoxBrush}"/> 
            </ObjectAnimationUsingKeyFrames> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentElement"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneTextBoxReadOnlyBrush}"/> 
            </ObjectAnimationUsingKeyFrames> 
           </Storyboard> 
          </VisualState> 
         </VisualStateGroup> 
         <VisualStateGroup x:Name="FocusStates"> 
          <!--<VisualState x:Name="Focused"> 
           <Storyboard> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="MainBorder"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneTextBoxEditBackgroundBrush}"/> 
            </ObjectAnimationUsingKeyFrames> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="MainBorder"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneTextBoxEditBorderBrush}"/> 
            </ObjectAnimationUsingKeyFrames> 
           </Storyboard> 
          </VisualState>--> 
          <VisualState x:Name="Unfocused"/> 
         </VisualStateGroup> 
        </VisualStateManager.VisualStateGroups> 
        <Border x:Name="MainBorder" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Margin="{StaticResource PhoneTouchTargetOverhang}"/> 
        <Border x:Name="ReadonlyBorder" BorderBrush="{StaticResource PhoneDisabledBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="Transparent" Margin="{StaticResource PhoneTouchTargetOverhang}" Visibility="Collapsed"/> 
        <Border BorderBrush="Transparent" BorderThickness="{TemplateBinding BorderThickness}" Background="Transparent" Margin="{StaticResource PhoneTouchTargetOverhang}"> 
         <ContentControl x:Name="ContentElement" BorderThickness="0" HorizontalContentAlignment="Stretch" Margin="{StaticResource PhoneTextBoxInnerMargin}" Padding="{TemplateBinding Padding}" VerticalContentAlignment="Stretch"/> 
        </Border> 
       </Grid> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 
</phone:PhoneApplicationPage.Resources> 

Теперь, когда с помощью TextBox на этой странице, она всегда будет белый текст на черном фоне. (Или обратный при выборе.)

Это:

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"> 
    <StackPanel> 
     <TextBox Text="something" /> 
     <TextBox /> 
    </StackPanel> 
</Grid> 

Создает это:

Example of implicity styled TextBoxes that always look the same

К сожалению, вы не можете ничего о ручках по выбору, используя цвет акцента, хотя сделать ,

Я не передавал состояния с отключенным или только для чтения, но они должны быть просты в изменении.