首页 文章

C#WPF ContentPresenter MenuItem TextAlignment

提问于
浏览
1

首先,我想提一下我是C#WPF的新手 . 我已经搜索了很多,但到目前为止我还没有找到解决问题的正确方法,我希望有人能帮助我 .

Now to my problem:

我有一个C#WPF应用程序,我有一个菜单 . 我正在使用Window.Resoucres区域为 x:Type MenuItem 定义一个新模板 . 这项工作到目前为止 .

但是,我不明白,将文本置于多行(多行)菜单中心 .

我有一个菜单项,其中包含“成本概览”文本 . 这应该在它们之间居中显示,因为我给菜单一个固定的宽度 .

我想要这样的东西(只是居中):

Costs
Overview

这是我目前使用的样式模板:

<Style x:Key="MenuItem" TargetType="{x:Type MenuItem}">
        <Setter Property="Background" Value="#FF6C6D6E"/>
        <Setter Property="BorderThickness" Value="0"/>
        <Setter Property="BorderBrush" Value="{x:Null}"/>
        <Setter Property="Foreground" Value="White"/>
        <Setter Property="Cursor" Value="Hand"/>
        <Setter Property="Width" Value="60"/>
        <Setter Property="Height" Value="90"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type MenuItem}">
                    <Border x:Name="Border" Background="{TemplateBinding Background}"  BorderBrush="{TemplateBinding BorderBrush}"  BorderThickness="{TemplateBinding BorderThickness}" HorizontalAlignment="Center" >
                        <Grid>
                            <!-- ContentPresenter to show an Icon -->
                            <ContentPresenter Margin="0,10,0,35" x:Name="Icon" VerticalAlignment="Center" ContentSource="Icon"/>
                            <!-- Content for the menu text etc -->
                            <ContentPresenter Margin="0,55,0,0" VerticalAlignment="Top" HorizontalAlignment="Center" ContentSource="Header" RecognizesAccessKey="True" />
                        </Grid>
                    </Border>

                    <!-- These triggers re-configure the four arrangements of MenuItem to show different levels of menu via Role -->
                    <ControlTemplate.Triggers>
                        <!-- Role = TopLevelItem :  this is a child menu item from the top level without any child items-->
                        <Trigger Property="Role" Value="TopLevelItem">
                            <Setter Property="Padding" Value="0"/>
                            <Setter Property="BorderBrush" Value="{x:Null}" />
                            <Setter Property="BorderThickness" Value="0"/>
                            <Setter Property="Width" Value="80" />
                            <Setter Property="Height" Value="80" />
                            <Setter Property="HorizontalAlignment" Value="Center" />
                        </Trigger>
                        <!-- Using colors for the Menu Highlight and IsEnabled-->
                        <Trigger Property="IsHighlighted" Value="true">
                            <Setter Property="Background" Value="#FF939498"  />
                        </Trigger>

                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Background" Value="#FF939498"  />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

这种风格给我的菜单如下 .

C# WPF Menu

如您所见,菜单中的文本不居中 . 我已经尝试了一些解决方案,比如在ContentPresenter中设置TextBlock来设置TextAlignment =“Center”属性,但我不知道如何在TextBlock绑定中获取MenuItem文本 .

我还尝试将TextBlock.TextAlignment =“Center”属性设置为ContentPresenter,但它也不起作用 .


你可能会看到,我的菜单有另一个问题 . 你知道吗,当我将鼠标悬停在MenuItem上时,如何移除蓝色焦点?正常的悬停样式是菜单会变成浅灰色,就像按钮中间一样 . 我的MenuItem也不使用菜单的全宽...

我期待着每一个想法 .

提前致谢!


解决方案

bars22给了我正确的提示..

我忘了我有一个更正常的菜单 . 我只是看着ControlTemplate ......

这是我的解决方案:

我在完成菜单时从MenuItem中放置了Style,并将菜单更改为以下内容:

<Menu Background="{x:Null}" ItemsSource="{Binding PageViewModels}">
                <Menu.ItemsPanel>
                    <ItemsPanelTemplate>
                        <VirtualizingStackPanel Orientation="Vertical"/>
                    </ItemsPanelTemplate>
                </Menu.ItemsPanel>
                <Menu.ItemTemplate>
                    <DataTemplate>
                        <MenuItem Icon="{Binding Icon}"
                            Command="{Binding DataContext.ChangePageCommand, RelativeSource={RelativeSource AncestorType={x:Type Window}}}"
                            CommandParameter="{Binding }"
                            Style="{StaticResource MenuItem}">
                            <MenuItem.Header>
                                <StackPanel>
                                    <TextBlock TextAlignment="Center" Text="{Binding Name}" />
                                </StackPanel>
                            </MenuItem.Header>
                        </MenuItem>
                    </DataTemplate>
                </Menu.ItemTemplate>
            </Menu>

1 回答

  • 1

    您可以将内容演示者的容器更改为 StackPanel .

    <StackPanel>
        <!-- ContentPresenter to show an Icon -->
        <ContentPresenter x:Name="Icon" ContentSource="Icon"/>
        <!-- Content for the menu text etc -->
        <ContentPresenter ContentSource="Header" RecognizesAccessKey="True" />
    </StackPanel>
    

    我已经测试了这些 MenuItems . 这是两种不同的变种 . 我觉得它看起来很好 .

    <Menu DockPanel.Dock="Top" Background="white">
        <MenuItem Header="Test">
            <MenuItem Style="{StaticResource MenuItem}">
                <MenuItem.Header>
                    <TextBlock Text="Costs Overview" HorizontalAlignment="Center" TextWrapping="Wrap" />
                </MenuItem.Header>
                <MenuItem.Icon>
                    <Image Source="/WPFTest;component/Images/Test.png" />
                </MenuItem.Icon>
            </MenuItem>
            <MenuItem Style="{StaticResource MenuItem}">
                <MenuItem.Header>
                    <StackPanel>
                        <TextBlock HorizontalAlignment="Center" Text="Costs" />
                        <TextBlock HorizontalAlignment="Center" Text="Overview" />
                    </StackPanel>
                </MenuItem.Header>
                <MenuItem.Icon>
                    <Image Source="/WPFTest;component/Images/Test.png" />
                </MenuItem.Icon>
            </MenuItem>
        </MenuItem>
    </Menu>
    

相关问题