中心菜单项strechted菜单中的内容

时间:2018-10-23 21:46:52

标签: wpf xaml menu

我想将Stackpanel在MenuHeader中居中。 MenuItem在整个菜单上均等伸展。 我试图将Stackpanel宽度绑定到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>

1 个答案:

答案 0 :(得分:0)

不会显示整个视图代码,该错误可能会返回到菜单的定义。

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

这是您提出的菜单的一种实现,其中菜单在StackPanel和Grid中间居中。
对照材料Design替换为按钮以进行测试。

StackPanel

<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>

图片

enter image description here

网格

<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>

图片

enter image description here

私下