어떻게 테마 스타일

Question

에서 ListPicker을에 i를 WPToolkit에서 ListPicker 컨트롤의 다음과 같은 기본 스타일을 가지고

<Style TargetType="toolkit:ListPicker" x:Key="ListPickerStyle1"> 
     <!--<Setter Property="Background" Value="{StaticResource PhoneTextBoxBrush}"/>--> 
     <Setter Property="Foreground" Value="{StaticResource PhoneTextBoxForegroundBrush}"/> 
     <Setter Property="FontSize" Value="{StaticResource PhoneFontSizeMediumLarge}"/> 
     <Setter Property="HorizontalContentAlignment" Value="Left"/> 
     <Setter Property="Margin" Value="{StaticResource PhoneTouchTargetOverhang}"/> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="toolkit:ListPicker"> 
        <StackPanel> 
         <VisualStateManager.VisualStateGroups> 
          <VisualStateGroup x:Name="PickerStates"> 
           <VisualState x:Name="Normal"/> 
           <VisualState x:Name="Expanded"> 
            <Storyboard> 
             <ObjectAnimationUsingKeyFrames 
             Storyboard.TargetName="Border" 
             Storyboard.TargetProperty="Background" 
             Duration="0"> 
              <DiscreteObjectKeyFrame 
              Value="{StaticResource PhoneTextBoxEditBackgroundColor}" 
              KeyTime="0"/> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames 
             Storyboard.TargetName="Border" 
             Storyboard.TargetProperty="BorderBrush" 
             Duration="0"> 
              <DiscreteObjectKeyFrame 
              Value="{StaticResource PhoneTextBoxEditBorderBrush}" 
              KeyTime="0"/> 
             </ObjectAnimationUsingKeyFrames> 
            </Storyboard> 
           </VisualState> 
          </VisualStateGroup> 
         </VisualStateManager.VisualStateGroups> 
         <ContentControl 
         Content="{TemplateBinding Header}" 
         ContentTemplate="{TemplateBinding HeaderTemplate}" 
         Foreground="{StaticResource PhoneSubtleBrush}" 
         FontSize="{StaticResource PhoneFontSizeNormal}" 
         HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" 
         Margin="0 0 0 8"/> 
         <Grid> 
          <Border 
          x:Name="Border" 
          Background="{TemplateBinding Background}" 
          BorderBrush="{TemplateBinding Background}" 
          BorderThickness="2"> 
           <Canvas x:Name="ItemsPresenterHost" MinHeight="46"> 
            <ItemsPresenter x:Name="ItemsPresenter"> 
             <ItemsPresenter.RenderTransform> 
              <TranslateTransform x:Name="ItemsPresenterTranslateTransform"/> 
             </ItemsPresenter.RenderTransform> 
            </ItemsPresenter> 
           </Canvas> 
          </Border> 
          <!--<Popup x:Name="FullModePopup"> 
           <Border Background="{StaticResource PhoneChromeBrush}"> 
            --><!-- Popup.Child should always be a Border --><!-- 
            <Grid> 
             <Grid.RowDefinitions> 
              <RowDefinition Height="Auto"/> 
              <RowDefinition/> 
             </Grid.RowDefinitions> 
             <ContentControl 
             Grid.Row="0" 
             Content="{TemplateBinding FullModeHeader}" 
             Foreground="{StaticResource PhoneForegroundBrush}" 
             FontFamily="{StaticResource PhoneFontFamilySemiBold}" 
             FontSize="{StaticResource PhoneFontSizeMedium}" 
             HorizontalAlignment="Left" 
             Margin="24 12 0 0"/> 
             <ListBox 
             x:Name="FullModeSelector" 
             Grid.Row="1" 
             ItemTemplate="{TemplateBinding ActualFullModeItemTemplate}" 
             FontSize="{TemplateBinding FontSize}" 
             Margin="{StaticResource PhoneMargin}"> 
              <ListBox.ItemsPanel> 
               <ItemsPanelTemplate> 
                <StackPanel/> 
                --><!-- Ensures all containers will be available during the Loaded event --><!-- 
               </ItemsPanelTemplate> 
              </ListBox.ItemsPanel> 
             </ListBox> 
            </Grid> 
           </Border> 
          </Popup>--> 
         </Grid> 
        </StackPanel> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 

그러나 나는 그것을인지 여부에 따라 특정 색상으로 테두리를 추가 할 수 있도록하고 싶습니다 Expanded 상태에 있는지 여부. 또한 배경은 확장 상태의 PhoneBackgroundBrush와 일치해야합니다. 현재이 스타일을 사용하면 ListPicker가 확장 될 때 배경이 변경되지 않고 ListPicker가 확장되었는지 여부에 관계없이 테두리가 표시되지 않습니다. 이것을 바꾸려면 어떻게해야합니까?

Answer 1

ListPickerControlTemplate1 당신이이 경우 등 국경 브러쉬, 배경 색상을 변경할 수있는 강조 VisualState와 컨트롤 템플릿입니다

<toolkit:ListPicker Template="{StaticResource ListPickerControlTemplate1}"> 

, 나는 노란색 배경을 사용하고 당신의 ListPicker에 템플릿을 적용

<ControlTemplate x:Key="ListPickerControlTemplate1" TargetType="toolkit:ListPicker"> 
    <StackPanel> 
     <VisualStateManager.VisualStateGroups> 
      <VisualStateGroup x:Name="PickerStates"> 
       <VisualState x:Name="Normal"/> 
       <VisualState x:Name="Highlighted"> 
        <Storyboard> 
         <ObjectAnimationUsingKeyFrames 
          Storyboard.TargetName="UserControl" 
          Storyboard.TargetProperty="Foreground" 
          Duration="0"> 
          <DiscreteObjectKeyFrame 
           Value="{StaticResource PhoneForegroundBrush}" 
           KeyTime="0"/> 
         </ObjectAnimationUsingKeyFrames> 
         <ObjectAnimationUsingKeyFrames 
          Storyboard.TargetName="Border" 
          Storyboard.TargetProperty="Background" 
          Duration="0"> 
          <DiscreteObjectKeyFrame 
           Value="{StaticResource PhoneBackgroundBrush}" 
           KeyTime="0"/> 
         </ObjectAnimationUsingKeyFrames> 
         <ObjectAnimationUsingKeyFrames 
          Storyboard.TargetName="Border" 
          Storyboard.TargetProperty="BorderBrush" 
          Duration="0"> 
          <DiscreteObjectKeyFrame 
           Value="Yellow" 
           KeyTime="0"/> 
         </ObjectAnimationUsingKeyFrames> 
        </Storyboard> 
       </VisualState> 
       .... 
........... 
</ControlTemplate> 

컨트롤 템플릿에서 ContentControl 및 일부 다른 부분을 제거했습니다. 관련성이 없기 때문입니다.