XAML 无头透视
XAML Pivot Headerless
我正在寻找更改我的数据透视表样式以在 header 中不留空 space。
这是我页面的图片:
蓝色部分是来自模板 10 的控件 header。
白色部分是空 space 距枢轴 header 的高度。
绿色部分是命令条(在枢轴内部)。
我不能在数据透视表中使用负边距,因为我的页面header 包含一个二级菜单,而这个结果被屏蔽了。
我写了一个样式来设置枢轴的高度header,但效果不佳。
<Page.Resources>
<Style x:Key="PivotHeaderless" TargetType="PivotItem">
<Setter Property="Margin" Value="0"/>
<Setter Property="Header" Value=""/>
<Setter Property="Height" Value="0"/>
</Style>
</Page.Resources>
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<StackPanel>
<Pivot x:Name="MainPivot">
<PivotItem Style="{ThemeResource PivotHeaderless}"/>
</Pivot>
</StackPanel>
</Grid>
感谢任何帮助。
为此,您必须更改控件本身的模板。
如果您导航到 C:\Program Files (x86)\Windows Kits\DesignTime\CommonConfiguration\Neutral\UAP\<SDKVERSION>\Generic\generic.xaml
,您会发现 Pivot
控件的默认模板包含以下内容:
<PivotPanel x:Name="Panel" VerticalAlignment="Stretch">
<Grid x:Name="PivotLayoutElement">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<!-- ... more code -->
</Grid>
网格第一行的高度为Auto
。这意味着它的高度被设置为适应所包含的内容。但是这个 header 不仅包含你的枢轴项的 header,还有两个用于分页的控制按钮 - Previ:
<Button x:Name="PreviousButton"
Grid.Column="1"
Template="{StaticResource PreviousTemplate}"
Width="20"
Height="36"
... />
<Button x:Name="NextButton"
Grid.Column="1"
Template="{StaticResource PreviousTemplate}"
Width="20"
Height="36"
... />
如您所见,这些按钮的高度被硬编码为 36 像素,这意味着无论您做什么,如果您不对它们做任何事情,header 将始终处于至少 36 像素的高度。
解决方案
最简单的解决方案是创建 Pivot
控件默认模板的副本(例如通过从 generic.xaml
文件复制 Style
定义)并设置第一个Grid
的行高为0。这将有效地隐藏它并使其不可见。为了使它更有效,您可以删除第一行中的所有控件,这样它们就不会被构建,从而提高性能:
<PivotPanel x:Name="Panel" VerticalAlignment="Stretch">
<Grid x:Name="PivotLayoutElement">
<Grid.RowDefinitions>
<RowDefinition Height="0" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid.RenderTransform>
<CompositeTransform x:Name="PivotLayoutElementTranslateTransform" />
</Grid.RenderTransform>
<ItemsPresenter x:Name="PivotItemPresenter" Grid.Row="1" Grid.ColumnSpan="3">
<ItemsPresenter.RenderTransform>
<TransformGroup>
<TranslateTransform x:Name="ItemsPresenterTranslateTransform" />
<CompositeTransform x:Name="ItemsPresenterCompositeTransform" />
</TransformGroup>
</ItemsPresenter.RenderTransform>
</ItemsPresenter>
</Grid>
</PivotPanel>
感谢 MZetko,我找到了完美的无头样式,你可以自己使用他的方法,或者如果你更喜欢只复制代码,这里是:
<Style TargetType="Pivot" x:Key="PivotHeaderless">
<Setter Property="Margin" Value="0" />
<Setter Property="Padding" Value="0" />
<Setter Property="Background" Value="{ThemeResource PivotBackground}" />
<Setter Property="IsTabStop" Value="False" />
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<Grid />
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Pivot">
<Grid x:Name="RootElement"
HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
VerticalAlignment="{TemplateBinding VerticalAlignment}"
Background="{TemplateBinding Background}">
<Grid.Resources>
<Style x:Key="BaseContentControlStyle" TargetType="ContentControl">
<Setter Property="FontFamily" Value="XamlAutoFontFamily" />
<Setter Property="FontWeight" Value="SemiBold" />
<Setter Property="FontSize" Value="15" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ContentControl">
<ContentPresenter Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
Margin="{TemplateBinding Padding}"
ContentTransitions="{TemplateBinding ContentTransitions}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
OpticalMarginAlignment="TrimSideBearings" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Grid.Resources>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="Orientation">
<VisualState x:Name="Portrait">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="TitleContentControl" Storyboard.TargetProperty="Margin">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource PivotPortraitThemePadding}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Landscape">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="TitleContentControl" Storyboard.TargetProperty="Margin">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource PivotLandscapeThemePadding}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="HeaderStates">
<VisualState x:Name="HeaderDynamic" />
<VisualState x:Name="HeaderStatic">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Header" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="StaticHeader" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<ContentControl x:Name="TitleContentControl"
IsTabStop="False"
Margin="{StaticResource PivotPortraitThemePadding}"
Visibility="Collapsed"
Content="{TemplateBinding Title}"
ContentTemplate="{TemplateBinding TitleTemplate}" />
<Grid Grid.Row="1">
<ScrollViewer x:Name="ScrollViewer"
Margin="{TemplateBinding Padding}"
HorizontalSnapPointsType="MandatorySingle"
HorizontalSnapPointsAlignment="Center"
HorizontalScrollBarVisibility="Hidden"
VerticalScrollMode="Disabled"
VerticalScrollBarVisibility="Disabled"
VerticalSnapPointsType="None"
VerticalContentAlignment="Stretch"
ZoomMode="Disabled"
Template="{StaticResource ScrollViewerScrollBarlessTemplate}"
BringIntoViewOnFocusChange="False">
<!---->
<PivotPanel x:Name="Panel" VerticalAlignment="Stretch">
<Grid x:Name="PivotLayoutElement">
<Grid.RowDefinitions>
<RowDefinition Height="0" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid.RenderTransform>
<CompositeTransform x:Name="PivotLayoutElementTranslateTransform" />
</Grid.RenderTransform>
<ContentPresenter x:Name="LeftHeaderPresenter"
Content="{TemplateBinding LeftHeader}"
ContentTemplate="{TemplateBinding LeftHeaderTemplate}"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch" />
<ContentControl x:Name="HeaderClipper"
Grid.Column="1"
UseSystemFocusVisuals="True"
HorizontalContentAlignment="Stretch">
<ContentControl.Clip>
<RectangleGeometry x:Name="HeaderClipperGeometry" />
</ContentControl.Clip>
<Grid Background="{ThemeResource PivotHeaderBackground}">
<Grid.RenderTransform>
<CompositeTransform x:Name="HeaderOffsetTranslateTransform" />
</Grid.RenderTransform>
<PivotHeaderPanel x:Name="StaticHeader" Visibility="Collapsed">
<PivotHeaderPanel.RenderTransform>
<CompositeTransform x:Name="StaticHeaderTranslateTransform" />
</PivotHeaderPanel.RenderTransform>
</PivotHeaderPanel>
<PivotHeaderPanel x:Name="Header">
<PivotHeaderPanel.RenderTransform>
<CompositeTransform x:Name="HeaderTranslateTransform" />
</PivotHeaderPanel.RenderTransform>
</PivotHeaderPanel>
</Grid>
</ContentControl>
<ContentPresenter x:Name="RightHeaderPresenter"
Grid.Column="2"
Content="{TemplateBinding RightHeader}"
ContentTemplate="{TemplateBinding RightHeaderTemplate}"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch" />
<ItemsPresenter x:Name="PivotItemPresenter" Grid.Row="1" Grid.ColumnSpan="3">
<ItemsPresenter.RenderTransform>
<TransformGroup>
<TranslateTransform x:Name="ItemsPresenterTranslateTransform" />
<CompositeTransform x:Name="ItemsPresenterCompositeTransform" />
</TransformGroup>
</ItemsPresenter.RenderTransform>
</ItemsPresenter>
</Grid>
</PivotPanel>
</ScrollViewer>
</Grid>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
我正在寻找更改我的数据透视表样式以在 header 中不留空 space。
这是我页面的图片:
蓝色部分是来自模板 10 的控件 header。
白色部分是空 space 距枢轴 header 的高度。
绿色部分是命令条(在枢轴内部)。
我不能在数据透视表中使用负边距,因为我的页面header 包含一个二级菜单,而这个结果被屏蔽了。
我写了一个样式来设置枢轴的高度header,但效果不佳。
<Page.Resources>
<Style x:Key="PivotHeaderless" TargetType="PivotItem">
<Setter Property="Margin" Value="0"/>
<Setter Property="Header" Value=""/>
<Setter Property="Height" Value="0"/>
</Style>
</Page.Resources>
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<StackPanel>
<Pivot x:Name="MainPivot">
<PivotItem Style="{ThemeResource PivotHeaderless}"/>
</Pivot>
</StackPanel>
</Grid>
感谢任何帮助。
为此,您必须更改控件本身的模板。
如果您导航到 C:\Program Files (x86)\Windows Kits\DesignTime\CommonConfiguration\Neutral\UAP\<SDKVERSION>\Generic\generic.xaml
,您会发现 Pivot
控件的默认模板包含以下内容:
<PivotPanel x:Name="Panel" VerticalAlignment="Stretch">
<Grid x:Name="PivotLayoutElement">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<!-- ... more code -->
</Grid>
网格第一行的高度为Auto
。这意味着它的高度被设置为适应所包含的内容。但是这个 header 不仅包含你的枢轴项的 header,还有两个用于分页的控制按钮 - Previ:
<Button x:Name="PreviousButton"
Grid.Column="1"
Template="{StaticResource PreviousTemplate}"
Width="20"
Height="36"
... />
<Button x:Name="NextButton"
Grid.Column="1"
Template="{StaticResource PreviousTemplate}"
Width="20"
Height="36"
... />
如您所见,这些按钮的高度被硬编码为 36 像素,这意味着无论您做什么,如果您不对它们做任何事情,header 将始终处于至少 36 像素的高度。
解决方案
最简单的解决方案是创建 Pivot
控件默认模板的副本(例如通过从 generic.xaml
文件复制 Style
定义)并设置第一个Grid
的行高为0。这将有效地隐藏它并使其不可见。为了使它更有效,您可以删除第一行中的所有控件,这样它们就不会被构建,从而提高性能:
<PivotPanel x:Name="Panel" VerticalAlignment="Stretch">
<Grid x:Name="PivotLayoutElement">
<Grid.RowDefinitions>
<RowDefinition Height="0" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid.RenderTransform>
<CompositeTransform x:Name="PivotLayoutElementTranslateTransform" />
</Grid.RenderTransform>
<ItemsPresenter x:Name="PivotItemPresenter" Grid.Row="1" Grid.ColumnSpan="3">
<ItemsPresenter.RenderTransform>
<TransformGroup>
<TranslateTransform x:Name="ItemsPresenterTranslateTransform" />
<CompositeTransform x:Name="ItemsPresenterCompositeTransform" />
</TransformGroup>
</ItemsPresenter.RenderTransform>
</ItemsPresenter>
</Grid>
</PivotPanel>
感谢 MZetko,我找到了完美的无头样式,你可以自己使用他的方法,或者如果你更喜欢只复制代码,这里是:
<Style TargetType="Pivot" x:Key="PivotHeaderless">
<Setter Property="Margin" Value="0" />
<Setter Property="Padding" Value="0" />
<Setter Property="Background" Value="{ThemeResource PivotBackground}" />
<Setter Property="IsTabStop" Value="False" />
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<Grid />
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Pivot">
<Grid x:Name="RootElement"
HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
VerticalAlignment="{TemplateBinding VerticalAlignment}"
Background="{TemplateBinding Background}">
<Grid.Resources>
<Style x:Key="BaseContentControlStyle" TargetType="ContentControl">
<Setter Property="FontFamily" Value="XamlAutoFontFamily" />
<Setter Property="FontWeight" Value="SemiBold" />
<Setter Property="FontSize" Value="15" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ContentControl">
<ContentPresenter Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
Margin="{TemplateBinding Padding}"
ContentTransitions="{TemplateBinding ContentTransitions}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
OpticalMarginAlignment="TrimSideBearings" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Grid.Resources>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="Orientation">
<VisualState x:Name="Portrait">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="TitleContentControl" Storyboard.TargetProperty="Margin">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource PivotPortraitThemePadding}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Landscape">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="TitleContentControl" Storyboard.TargetProperty="Margin">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource PivotLandscapeThemePadding}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="HeaderStates">
<VisualState x:Name="HeaderDynamic" />
<VisualState x:Name="HeaderStatic">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Header" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="StaticHeader" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<ContentControl x:Name="TitleContentControl"
IsTabStop="False"
Margin="{StaticResource PivotPortraitThemePadding}"
Visibility="Collapsed"
Content="{TemplateBinding Title}"
ContentTemplate="{TemplateBinding TitleTemplate}" />
<Grid Grid.Row="1">
<ScrollViewer x:Name="ScrollViewer"
Margin="{TemplateBinding Padding}"
HorizontalSnapPointsType="MandatorySingle"
HorizontalSnapPointsAlignment="Center"
HorizontalScrollBarVisibility="Hidden"
VerticalScrollMode="Disabled"
VerticalScrollBarVisibility="Disabled"
VerticalSnapPointsType="None"
VerticalContentAlignment="Stretch"
ZoomMode="Disabled"
Template="{StaticResource ScrollViewerScrollBarlessTemplate}"
BringIntoViewOnFocusChange="False">
<!---->
<PivotPanel x:Name="Panel" VerticalAlignment="Stretch">
<Grid x:Name="PivotLayoutElement">
<Grid.RowDefinitions>
<RowDefinition Height="0" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid.RenderTransform>
<CompositeTransform x:Name="PivotLayoutElementTranslateTransform" />
</Grid.RenderTransform>
<ContentPresenter x:Name="LeftHeaderPresenter"
Content="{TemplateBinding LeftHeader}"
ContentTemplate="{TemplateBinding LeftHeaderTemplate}"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch" />
<ContentControl x:Name="HeaderClipper"
Grid.Column="1"
UseSystemFocusVisuals="True"
HorizontalContentAlignment="Stretch">
<ContentControl.Clip>
<RectangleGeometry x:Name="HeaderClipperGeometry" />
</ContentControl.Clip>
<Grid Background="{ThemeResource PivotHeaderBackground}">
<Grid.RenderTransform>
<CompositeTransform x:Name="HeaderOffsetTranslateTransform" />
</Grid.RenderTransform>
<PivotHeaderPanel x:Name="StaticHeader" Visibility="Collapsed">
<PivotHeaderPanel.RenderTransform>
<CompositeTransform x:Name="StaticHeaderTranslateTransform" />
</PivotHeaderPanel.RenderTransform>
</PivotHeaderPanel>
<PivotHeaderPanel x:Name="Header">
<PivotHeaderPanel.RenderTransform>
<CompositeTransform x:Name="HeaderTranslateTransform" />
</PivotHeaderPanel.RenderTransform>
</PivotHeaderPanel>
</Grid>
</ContentControl>
<ContentPresenter x:Name="RightHeaderPresenter"
Grid.Column="2"
Content="{TemplateBinding RightHeader}"
ContentTemplate="{TemplateBinding RightHeaderTemplate}"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch" />
<ItemsPresenter x:Name="PivotItemPresenter" Grid.Row="1" Grid.ColumnSpan="3">
<ItemsPresenter.RenderTransform>
<TransformGroup>
<TranslateTransform x:Name="ItemsPresenterTranslateTransform" />
<CompositeTransform x:Name="ItemsPresenterCompositeTransform" />
</TransformGroup>
</ItemsPresenter.RenderTransform>
</ItemsPresenter>
</Grid>
</PivotPanel>
</ScrollViewer>
</Grid>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>