visual tutorial studio development developing bootstrap apps app xaml windows-runtime win-universal-app windows-10 uwp

xaml - tutorial - Anulación de los pinceles de primer plano del encabezado Pivot en la aplicación UWP(Win 10 RTM SDK)



uwp vs wpf (1)

Estoy tratando de anular los pinceles de tema de primer plano del encabezado Pivot, pero no importa lo que haga, la aplicación UWP simplemente lo ignora.

Para que quede claro, esta pregunta es sobre el control UWP Pivot, no sobre el Win (Phone) 8.1. Utilicé el método de anulación de pincel de tema en una aplicación 8.1 y funcionó perfectamente. Pero parece que no puedo hacer lo mismo con un Pivot UWP.

Busqué los pinceles respectivos en generic.xaml (y en el panel Propiedades en Pinceles -> Recursos de System Brush), que son PivotHeaderForegroundSelectedBrush y PivotHeaderForegroundUnselectedBrush en una aplicación UWP, y los agregué a mi diccionario de recursos en app.xaml, pero a diferencia del otros cepillos del sistema, los Pivot no se anulan por alguna razón.

<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"/>

Conozco otras formas de cambiar el color del primer plano del encabezado, pero eso puede implicar la presencia de conversores o códigos adicionales, que prefiero no usar para ser honesto si puedo hacerlo de una manera limpia. Traté de editar el estilo de Pivot predeterminado, pero no veo ningún lugar donde pueda agregar / editar una propiedad de primer plano para los elementos de encabezado en el estilo de pivote predeterminado.

¡Gracias por adelantado! :)


Curiosamente, la propiedad de Foreground de PivotItemStyle controla el color de primer plano del contenido dentro de PivotItem , no el encabezado del mismo. Y no hay forma de modificar el color del encabezado dentro del estilo.

Es posible que pueda encontrar los recursos de color correspondientes y modificarlos para lograr lo que desea, pero esta es una forma xaml más flexible y pura:

El control Pivot realidad tiene un HeaderTemplate que te permite personalizar completamente tus encabezados de PivotItem . Vea el siguiente ejemplo de código, todos los encabezados deben tener el color Teal .

<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> Actualizar

Así que aquí hay una mejor manera.

Usé la nueva herramienta Live Visual Tree en Visual Studio para ayudar a ubicar el elemento de encabezado real. Es un control llamado PivotHeaderItem . Resulta que todo el estilo se define dentro de este control.

Luego tuve que ir a msdn y agarré el estilo completo de este control (Blend no funcionó).

Como puede ver dentro del estilo, el control tiene un Foreground predeterminado de {ThemeResource SystemControlForegroundBaseMediumBrush} y dentro de los estados visuales , este Foreground se cambia a {ThemeResource SystemControlHighlightAltBaseHighBrush} cuando el estado va a Selected . Los cambié a Red y Green para hacerlos más obvios.

<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>

¡Con esto, ahora debería poder personalizar completamente sus encabezados de pivote! :)