2015-08-03 19 views
15

Pivot başlık ön plan tema fırçalarını geçersiz kılmaya çalışıyorum, ancak UWP uygulamasının ne yapmamasına bakılmaksızın onu yok sayarım.UWP uygulamasında Pivot başlık ön plan fırçalarını geçersiz kılma (Win 10 RTM SDK)

Net olmak gerekirse, bu soru UWP Pivot kontrolü ile ilgilidir, Win (Telefon) 8.1 bir değil. Tema fırça override yöntemini bir 8.1 uygulamasında kullandım ve mükemmel bir şekilde çalıştı. Ama ben bir UWP Pivot için aynısını yapamayacağım.

ben ilgili fırçaların aradı

generic.xaml içinde (ve Fırçalar altında Özellikler bölmesinde -> Sistem Fırça Kaynaklar), bir UWP app PivotHeaderForegroundSelectedBrush ve PivotHeaderForegroundUnselectedBrush, ve app.xaml benim kaynak sözlüğüne onları eklendi Ancak, diğer sistem fırçalarının aksine, Pivot olanlar bir nedenden dolayı geçersiz kılmamaktadır.

<SolidColorBrush x:Key="SystemControlForegroundAccentBrush" Color="Gray"/> 
<SolidColorBrush x:Key="SystemControlBackgroundAccentBrush" Color="Gray"/> 
<SolidColorBrush x:Key="SystemColorControlAccentBrush" Color="Gray"/> 
<SolidColorBrush x:Key="PivotHeaderForegroundSelectedBrush" Color="Green" /> 
<SolidColorBrush x:Key="PivotHeaderForegroundUnselectedBrush" Color="Red"/> 

Ben başlık ön plan rengini değiştirmek için başka yollar biliyorum, ama temiz bir şekilde yapabiliriz eğer Doğrusu dürüst olmak kullanmamayı tercih hangi arkasında dönüştürücüler veya ekstra kod içerebilir. Varsayılan Pivot stilini düzenlemeyi denedim, ancak varsayılan Pivot stilinde başlık öğeleri için bir Foreground özelliği ekleyebileceğim/düzenleyebileceğim herhangi bir yer görmüyorum.

Şimdiden teşekkürler! :)

cevap

26

İlginç PivotItemStyle ait Foreground mülkiyet PivotItem içinde içerik ön plan rengini, değil başlık bunun kontrol eder. Ve stil içinde başlığının rengini değiştirmenin bir yolu yoktur.

Sen gelen renk kaynakları bulmak ve ne istediğinizi elde etmek için bunları değiştirmek mümkün olabilir, ama burada daha esnek ve saf xaml yolu -

Pivot kontrolü aslında tamamen özelleştirmek sağlayan bir HeaderTemplate sahiptir PivotItembaşlıklarınız. Aşağıdaki kod örneğine bakın, tüm başlıklarıTeal rengine sahip olmalıdır.

<Grid> 
    <Pivot Title="Pivot"> 
     <Pivot.HeaderTemplate> 
      <DataTemplate> 
       <Grid> 
        <TextBlock Text="{Binding}" Foreground="Teal" /> 
       </Grid> 
      </DataTemplate> 
     </Pivot.HeaderTemplate> 

     <PivotItem Header="My first header"> 
      <Grid/> 
     </PivotItem> 
    </Pivot> 
</Grid> 


Güncelleme

Yani burada daha iyi bir yoldur.

Ben gerçek başlık öğesini bulmaya yardımcı olmak için Visual Studio yeni Canlı Görsel Ağacı aracı kullanılır. PivotHeaderItem isimli bir kontrol. Yani ortaya çıkıyor, tüm stil bu kontrolde tanımlanıyor.

O zaman msdn'a gitmek zorunda kaldım ve bu kontrolün tam stilini yakaladım (Blend çalışmadı). Eğer stil içinde görebileceğiniz gibi

kontrol devletSelected gittiğinde bu Foreground{ThemeResource SystemControlHighlightAltBaseHighBrush} değiştirildi alır, varsayılan bir {ThemeResource SystemControlForegroundBaseMediumBrush} ve görsel devletler içinde Foreground sahiptir. Onları daha belirgin hale getirmek için onları Red ve Green olarak değiştirdim.

<Style TargetType="PivotHeaderItem"> 
    <Setter Property="FontSize" Value="{ThemeResource PivotHeaderItemFontSize}" /> 
    <Setter Property="FontFamily" Value="{ThemeResource PivotHeaderItemFontFamily}" /> 
    <Setter Property="FontWeight" Value="{ThemeResource PivotHeaderItemThemeFontWeight}" /> 
    <Setter Property="CharacterSpacing" Value="{ThemeResource PivotHeaderItemCharacterSpacing}" /> 
    <Setter Property="Background" Value="Transparent" /> 
    <Setter Property="Foreground" Value="Red" /> <!-- original value {ThemeResource SystemControlForegroundBaseMediumBrush} --> 
    <Setter Property="Padding" Value="{ThemeResource PivotHeaderItemMargin}" /> 
    <Setter Property="Height" Value="48" /> 
    <Setter Property="VerticalContentAlignment" Value="Center" /> 
    <Setter Property="IsTabStop" Value="False" /> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="PivotHeaderItem"> 
       <Grid x:Name="Grid" Background="{TemplateBinding Background}"> 
        <Grid.Resources> 
         <Style x:Key="BaseContentPresenterStyle" TargetType="ContentPresenter"> 
          <Setter Property="FontFamily" Value="Segoe UI" /> 
          <Setter Property="FontWeight" Value="SemiBold" /> 
          <Setter Property="FontSize" Value="15" /> 
          <Setter Property="TextWrapping" Value="Wrap" /> 
          <Setter Property="LineStackingStrategy" Value="MaxHeight" /> 
          <Setter Property="TextLineBounds" Value="Full" /> 
          <Setter Property="OpticalMarginAlignment" Value="TrimSideBearings" /> 
         </Style> 
         <Style x:Key="BodyContentPresenterStyle" TargetType="ContentPresenter" BasedOn="{StaticResource BaseContentPresenterStyle}"> 
          <Setter Property="FontFamily" Value="{ThemeResource PivotHeaderItemFontFamily}" /> 
          <Setter Property="FontWeight" Value="{ThemeResource PivotHeaderItemThemeFontWeight}" /> 
          <Setter Property="FontSize" Value="{ThemeResource PivotHeaderItemFontSize}" /> 
         </Style> 
        </Grid.Resources> 
        <VisualStateManager.VisualStateGroups> 
         <VisualStateGroup x:Name="SelectionStates"> 
          <VisualStateGroup.Transitions> 
           <VisualTransition From="Unselected" To="UnselectedLocked" GeneratedDuration="0:0:0.33" /> 
           <VisualTransition From="UnselectedLocked" To="Unselected" GeneratedDuration="0:0:0.33" /> 
          </VisualStateGroup.Transitions> 
          <VisualState x:Name="Disabled"> 
           <Storyboard> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseMediumLowBrush}" /> 
            </ObjectAnimationUsingKeyFrames> 
           </Storyboard> 
          </VisualState> 
          <VisualState x:Name="Unselected" /> 
          <VisualState x:Name="UnselectedLocked"> 
           <Storyboard> 
            <DoubleAnimation Storyboard.TargetName="ContentPresenterTranslateTransform" Storyboard.TargetProperty="X" Duration="0" To="{ThemeResource PivotHeaderItemLockedTranslation}" /> 
            <DoubleAnimation Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="(UIElement.Opacity)" Duration="0" To="0" /> 
           </Storyboard> 
          </VisualState> 
          <VisualState x:Name="Selected"> 
           <Storyboard> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="Green" /> <!-- original value {ThemeResource SystemControlHighlightAltBaseHighBrush} --> 
            </ObjectAnimationUsingKeyFrames> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Grid" Storyboard.TargetProperty="Background"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightTransparentBrush}" /> 
            </ObjectAnimationUsingKeyFrames> 
           </Storyboard> 
          </VisualState> 
          <VisualState x:Name="UnselectedPointerOver"> 
           <Storyboard> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseMediumHighBrush}" /> 
            </ObjectAnimationUsingKeyFrames> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Grid" Storyboard.TargetProperty="Background"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightTransparentBrush}" /> 
            </ObjectAnimationUsingKeyFrames> 
           </Storyboard> 
          </VisualState> 
          <VisualState x:Name="SelectedPointerOver"> 
           <Storyboard> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseMediumHighBrush}" /> 
            </ObjectAnimationUsingKeyFrames> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Grid" Storyboard.TargetProperty="Background"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightTransparentBrush}" /> 
            </ObjectAnimationUsingKeyFrames> 
           </Storyboard> 
          </VisualState> 
          <VisualState x:Name="UnselectedPressed"> 
           <Storyboard> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseMediumHighBrush}" /> 
            </ObjectAnimationUsingKeyFrames> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Grid" Storyboard.TargetProperty="Background"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightTransparentBrush}" /> 
            </ObjectAnimationUsingKeyFrames> 
           </Storyboard> 
          </VisualState> 
          <VisualState x:Name="SelectedPressed"> 
           <Storyboard> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseMediumHighBrush}" /> 
            </ObjectAnimationUsingKeyFrames> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Grid" Storyboard.TargetProperty="Background"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightTransparentBrush}" /> 
            </ObjectAnimationUsingKeyFrames> 
           </Storyboard> 
          </VisualState> 
         </VisualStateGroup> 
        </VisualStateManager.VisualStateGroups> 
        <ContentPresenter x:Name="ContentPresenter" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" Margin="{TemplateBinding Padding}" FontSize="{TemplateBinding FontSize}" FontFamily="{TemplateBinding FontFamily}" FontWeight="{TemplateBinding FontWeight}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"> 
         <ContentPresenter.RenderTransform> 
          <TranslateTransform x:Name="ContentPresenterTranslateTransform" /> 
         </ContentPresenter.RenderTransform> 
        </ContentPresenter> 
       </Grid> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 

Bu sayede, artık pivot başlıklarınızı tamamen özelleştirebilmeniz gerekir! :)

+0

Cevabınız için teşekkürler Justin :), ama bu yöntemi zaten biliyorum. Benim sorunum, tüm başlıkların aynı rengi alması gerçeğinde yatmaktadır. Normal Pivot gibi seçilmiş ve seçilmemiş başlıklar için farklı bir renge (veya opaklığa) sahip olmak istiyorum. Bir 8.1 uygulamasındaki en kolay yol, yukarıda kaydettiğim yöntemi kullanmaktı, ancak önerilen yönteminizi kullanırsam, başlık öğelerinin opacity.color'unu değiştirmek için bir dönüştürücü veya kod arkası kullanmam gerekir. – Abdousamad

+0

@Abdousamad ohh Haklısınız! Bir düşüneyim, sana geri dönelim. –

+0

@Abdousamad daha iyi bir çözümle güncellendi. :) –