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>