如何更改NavigationView标题的高度?

huangapple go评论61阅读模式
英文:

How can I change the height of the NavigationView Header?

问题

以下是翻译好的内容:

如何减小我的图片中显示的标题文本上方和下方的空间?我看到这是来自标题的 DataTemplate,但我不太明白。此外,https://learn.microsoft.com/en-us/uwp/api/windows.ui.xaml.controls.navigationview.header?view=winrt-22621 并没有真正帮助我。我还想知道如何将标题文本左对齐,与下方的蓝色内容区域保持一行。

<NavigationView
    x:Name="NavigationViewControl"
    Canvas.ZIndex="0"
    IsBackButtonVisible="Visible"
    IsBackEnabled="{x:Bind ViewModel.IsBackEnabled, Mode=OneWay}"
    SelectedItem="{x:Bind ViewModel.Selected, Mode=OneWay}"
    IsSettingsVisible="True"
    ExpandedModeThresholdWidth="1280"
    DisplayModeChanged="NavigationViewControl_DisplayModeChanged"
    OpenPaneLength="160"
    IsPaneOpen="False"
    Header="{x:Bind ((ContentControl)ViewModel.Selected).Content, Mode=OneWay}">
    <NavigationView.MenuItems>
        <NavigationViewItem Content="Dashboard" helpers:NavigationHelper.NavigateTo="App.ViewModels.DashboardViewModel" Icon="Home" ></NavigationViewItem>
    </NavigationView.MenuItems>
    <NavigationView.HeaderTemplate>
        <DataTemplate>
            <Grid>
                <TextBlock
                    Text="{Binding}"
                    Style="{ThemeResource TitleTextBlockStyle}" />
            </Grid>
        </DataTemplate>
    </NavigationView.HeaderTemplate>
    <i:Interaction.Behaviors>
        <behaviors:NavigationViewHeaderBehavior
            DefaultHeader="{x:Bind ((ContentControl)ViewModel.Selected).Content, Mode=OneWay}">
            <behaviors:NavigationViewHeaderBehavior.DefaultHeaderTemplate>
                <DataTemplate>
                    <Grid>
                        <TextBlock
                            Text="{Binding}"
                            Style="{ThemeResource TitleTextBlockStyle}" />
                    </Grid>
                </DataTemplate>
            </behaviors:NavigationViewHeaderBehavior.DefaultHeaderTemplate>
        </behaviors:NavigationViewHeaderBehavior>
    </i:Interaction.Behaviors>
    <Frame x:Name="NavigationFrame" Grid.Row="2" Background="{ThemeResource SystemAccentColorLight2}" Padding="3" CornerRadius="8"/>
</NavigationView>
英文:

如何更改NavigationView标题的高度?

How can i reduce the space above and bellow the Header Text shown in my picture. I see that it comes from the DataTemplate for the header but I did not get it. Also https://learn.microsoft.com/en-us/uwp/api/windows.ui.xaml.controls.navigationview.header?view=winrt-22621 did not really help. I would also like to know how to align the Header Text left in one line with the blue content area bellow.

<NavigationView
    x:Name="NavigationViewControl"
    Canvas.ZIndex="0"
    IsBackButtonVisible="Visible"
    IsBackEnabled="{x:Bind ViewModel.IsBackEnabled, Mode=OneWay}"
    SelectedItem="{x:Bind ViewModel.Selected, Mode=OneWay}"
    IsSettingsVisible="True"
    ExpandedModeThresholdWidth="1280"
    DisplayModeChanged="NavigationViewControl_DisplayModeChanged"
    OpenPaneLength="160"
    IsPaneOpen="False"
    Header="{x:Bind ((ContentControl)ViewModel.Selected).Content, Mode=OneWay}">
    <NavigationView.MenuItems>
        <NavigationViewItem Content="Dashboard" helpers:NavigationHelper.NavigateTo="App.ViewModels.DashboardViewModel" Icon="Home" ></NavigationViewItem>
    </NavigationView.MenuItems>
    <NavigationView.HeaderTemplate>
        <DataTemplate>
            <Grid>
                <TextBlock
                    Text="{Binding}"
                    Style="{ThemeResource TitleTextBlockStyle}" />
            </Grid>
        </DataTemplate>
    </NavigationView.HeaderTemplate>
    <i:Interaction.Behaviors>
        <behaviors:NavigationViewHeaderBehavior
            DefaultHeader="{x:Bind ((ContentControl)ViewModel.Selected).Content, Mode=OneWay}">
            <behaviors:NavigationViewHeaderBehavior.DefaultHeaderTemplate>
                <DataTemplate>
                    <Grid>
                        <TextBlock
                            Text="{Binding}"
                            Style="{ThemeResource TitleTextBlockStyle}" />
                    </Grid>
                </DataTemplate>
            </behaviors:NavigationViewHeaderBehavior.DefaultHeaderTemplate>
        </behaviors:NavigationViewHeaderBehavior>
    </i:Interaction.Behaviors>
    <Frame x:Name="NavigationFrame" Grid.Row="2" Background="{ThemeResource SystemAccentColorLight2}" Padding="3" CornerRadius="8"/>
</NavigationView>

答案1

得分: 1

需要覆盖这个资源:

<Thickness x:Key="NavigationViewHeaderMargin">56,44,0,0</Thickness>

您可以将其覆盖为 Page 资源:

<Page>
    <Page.Resources>
        <Thickness x:Key="NavigationViewHeaderMargin">0,0,0,0</Thickness>
    </Page.Resources>
    <NavigationView />
</Page>

或者在您的 NavigationView 内部:

<NavigationView>
    <NavigationView.Resources>
        <Thickness x:Key="NavigationViewHeaderMargin">0,0,0,0</Thickness>
    </NavigationView.Resources>
</NavigationView>

您可以查看如何实际在 generic.xaml 中使用 NavigationViewHeaderMargin

英文:

You need to override this resource:

<Thickness x:Key="NavigationViewHeaderMargin">56,44,0,0</Thickness>

You can override it as Page resource:

<Page>
    <Page.Resources>
        <Thickness x:Key="NavigationViewHeaderMargin">0,0,0,0</Thickness>
    </Page.Resources>
    <NavigationView />
</Page>

or inside your NavigationView:

<NavigationView>
    <NavigationView.Resources>
        <Thickness x:Key="NavigationViewHeaderMargin">0,0,0,0</Thickness>
    </NavigationView.Resources>
</NavigationView>

You can see how NavigationViewHeaderMargin is actually used in generic.xaml.

huangapple
  • 本文由 发表于 2023年5月25日 14:50:40
  • 转载请务必保留本文链接:https://go.coder-hub.com/76329586.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定