拉伸菜单中的中心菜单项内容

Question

我想在 MenuHeader 中将 Stackpanel 居中。 MenuItems 在整个菜单上均等地伸展。 我尝试将 Stackpanel Width 绑定到 Parent MenuItem Width，这在 Designer 中得到了完美的结果。但是，我在调试的时候，Stackpanel 还是靠左对齐的。

<Menu Grid.Column="1"
              Grid.Row="1">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <UniformGrid Rows="1"/>
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>

        <MenuItem x:Name="OpenSourceView"                       
                      Background="{DynamicResource PrimaryHueMidBrush}"  
                      HorizontalContentAlignment="Center"
                      Padding="0"
                      Click="OpenMenu"  
                      Height="60"                         
                     >
            <MenuItem.Header>
                <StackPanel     Width="{Binding ActualWidth, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type MenuItem}}}"
                                VerticalAlignment="Center"
                                HorizontalAlignment="Center"
                                >
                    <materialDesign:PackIcon 
                            Kind="Camcorder" 
                            Height="30" 
                            Width="30"
                            Foreground="#262526"
                            HorizontalAlignment="Center"></materialDesign:PackIcon>
                    <AccessText Foreground="#262526" 
                                    FontWeight="Bold" 
                                    FontSize="12" 
                                    Width="Auto"
                                    VerticalAlignment="Center"
                                HorizontalAlignment="Center">Source</AccessText>
                </StackPanel>
            </MenuItem.Header>
        </MenuItem>
</Menu>

它在设计器中的外观以及我想要的效果：

https://i.imgur.com/2nkHxVw.png

调试时的样子：

https://i.imgur.com/ib1ILig.png

编辑： 我用网格替换了 Stackpanel。现在它居中但被截断了一半：

https://i.imgur.com/0piRPcM.png

<Menu Grid.Column="1"
              Grid.Row="1">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <UniformGrid Rows="1"/>
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>

        <MenuItem x:Name="OpenSourceView"                       
                      Background="{DynamicResource PrimaryHueMidBrush}"                       
                      Padding="0"
                      Click="OpenMenu"  
                      Height="60"                         
                     >
            <MenuItem.Header>
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="*"/>
                        <RowDefinition Height="30"/>
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="{Binding ActualWidth, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type MenuItem}}}"/>
                    </Grid.ColumnDefinitions>

                    <materialDesign:PackIcon 
                            Grid.Column="0"
                            Grid.Row="0"
                            Kind="Camcorder" 
                            Height="30" 
                            Width="30"
                            Foreground="#262526"
                            HorizontalAlignment="Center"/>
                    <AccessText Foreground="#262526"
                                Grid.Row="1"
                                 FontWeight="Bold" 
                                 FontSize="12" 
                                 Width="Auto"
                                 VerticalAlignment="Center"
                                 HorizontalAlignment="Center">Source</AccessText>
                </Grid>
            </MenuItem.Header>
        </MenuItem>
</Menu>

Answer 1

view的整个代码没有显示出来，这个bug可能是返回到Menu的定义。

<Menu Grid.Column = "1" Grid.Row = "1">

这是您提出的菜单的一个实现，其中菜单与 StackPanel 和 Grid 很好地居中。
将控件materialDesign替换为按钮进行测试。

堆栈面板

<Window
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d"
        Title="MainWindow"  Width="1137.333"
        WindowState="Maximized"
        WindowStartupLocation="CenterScreen">

    <DockPanel>

        <!-- Menu Area -->
        <Border VerticalAlignment="Top" DockPanel.Dock="Top" Margin="0,5,0,5">

            <!-- Diagram Area -->
            <Grid x:Name="DiagramPane" Margin="10,0,10,10">

                <Grid.RowDefinitions>
                    <RowDefinition Height="auto" />                  
                </Grid.RowDefinitions>

                <Menu VerticalAlignment="Top" Grid.Row="0" Height="60" Margin="0,-7,0,0" >
                    <ItemsControl.ItemsPanel>
                        <ItemsPanelTemplate>
                            <UniformGrid Rows="1"/>
                        </ItemsPanelTemplate>
                    </ItemsControl.ItemsPanel>

                    <MenuItem x:Name="OpenSourceView"                       
                      Background="Yellow"  
                      HorizontalContentAlignment="Center"
                      Padding="0"
                      Height="60" >

                        <MenuItem.Header>
                            <StackPanel     Width="{Binding ActualWidth, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type MenuItem}}}"
                                VerticalAlignment="Center"
                                HorizontalAlignment="Center"                                >

                                <Button Grid.Column="0"   HorizontalAlignment="Center" Height="30" Width="30" Margin="0,0,0,0"  IsDefault="True"   Command = "{Binding AjoutCommand}" CommandParameter = "null">
                                    <Image Opacity="0.4" HorizontalAlignment="Center"  VerticalAlignment="Center" Source="/Images/AddFile.png" Grid.Column="2"  Height="16"  />
                                </Button>

                                <AccessText Foreground="#262526" 
                                    FontWeight="Bold" 
                                    FontSize="12" 
                                    Width="Auto"
                                    VerticalAlignment="Center"
                                HorizontalAlignment="Center">Source</AccessText>
                            </StackPanel>
                        </MenuItem.Header>
                    </MenuItem>
                </Menu>

            </Grid>
        </Border>
    </DockPanel>
</Window>

图片

网格

<Window
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d"
        Title="MainWindow"  Width="1137.333"
        WindowState="Maximized"
        WindowStartupLocation="CenterScreen">

    <DockPanel>
        <!-- Menu Area -->
        <Border VerticalAlignment="Top" DockPanel.Dock="Top" Margin="0,5,0,5">
            <!-- Diagram Area -->
            <Grid x:Name="DiagramPane" Margin="10,0,10,10">
                <Grid.RowDefinitions>
                    <RowDefinition Height="auto" />
                </Grid.RowDefinitions>

                <Menu VerticalAlignment="Top" Grid.Row="0" Height="60" Margin="0,-7,0,0" >
                    <ItemsControl.ItemsPanel>
                        <ItemsPanelTemplate>
                            <UniformGrid Rows="1"/>
                        </ItemsPanelTemplate>
                    </ItemsControl.ItemsPanel>

                    <MenuItem x:Name="OpenSourceView"                       
                      Background="Yellow"                       
                      Padding="0"
                      Height="60"                         
                     >
                        <MenuItem.Header>
                            <Grid>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="*"/>
                                    <RowDefinition Height="30"/>
                                </Grid.RowDefinitions>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="{Binding ActualWidth, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type MenuItem}}}"/>
                                </Grid.ColumnDefinitions>

                                <Button Grid.Column="0"   HorizontalAlignment="Center" Height="30" Width="30" Margin="0,0,0,0"  IsDefault="True"   Command = "{Binding AjoutCommand}" CommandParameter = "null">
                                    <Image Opacity="0.4" HorizontalAlignment="Center"  VerticalAlignment="Center" Source="/Images/AddFile.png" Grid.Column="2"  Height="16"  />
                                </Button>

                            <AccessText Foreground="#262526"
                                Grid.Row="1"
                                 FontWeight="Bold" 
                                 FontSize="12" 
                                 Width="Auto"
                                 VerticalAlignment="Center"
                                 HorizontalAlignment="Center">Source</AccessText>
                            </Grid>
                        </MenuItem.Header>
                    </MenuItem>
                </Menu>               
            </Grid>
        </Border>

    </DockPanel>

</Window>

图片

真诚的