如何在垂直菜单响应式菜单中使用图像制作MenuItem

时间:2018-12-29 07:19:26

标签: c# .net wpf

我在应用程序中添加了一个垂直菜单,其中每个菜单项都有一个图像,以及如何设置所有图像都具有响应性。

我也尝试过对图像进行Horizo​​ntalAlign =“ Stretch”,但是它不起作用。

<Menu  Grid.Column="0" x:Name="MainMenu"  HorizontalAlignment="Left" VerticalAlignment="Stretch" Background="{StaticResource SideMensBackground }">
        <Menu.ItemsPanel>
            <ItemsPanelTemplate>
                <VirtualizingStackPanel Orientation="Vertical"/>
            </ItemsPanelTemplate>
        </Menu.ItemsPanel>
        <MenuItem HorizontalAlignment="Stretch" Name="logo" IsEnabled="False" Style="{StaticResource EditSubMenuitem}" exten:MenuItemExtensions.GroupName="SideMenuGroup">
            <MenuItem.Icon>
                <Image HorizontalAlignment="Stretch" MaxWidth="32" Source="/Resources/icons/logo.png"/>
            </MenuItem.Icon>
        </MenuItem>
        <MenuItem HorizontalAlignment="Stretch" Name="menuHam" Style="{StaticResource EditSubMenuitem}" exten:MenuItemExtensions.GroupName="SideMenuGroup">
            <MenuItem.Icon>
                <Image HorizontalAlignment="Stretch" MaxWidth="32" Source="/Resources/icons/hamburger-menu.png"/>
            </MenuItem.Icon>
        </MenuItem>
</Menu>

这是EditSubMenuitem样式

<Style x:Key="EditSubMenuitem" TargetType="MenuItem">
    <Setter Property="FontSize" Value="20"/>
    <Setter Property="HorizontalAlignment" Value="Stretch"/>
    <Setter Property="Margin" Value="0 5 0 5"/>
    <Setter Property="Template">
    <Setter.Value>
        <ControlTemplate TargetType="MenuItem">
            <Border x:Name="templateRoot" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True">
                <Grid VerticalAlignment="Center">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="Auto"/>
                    </Grid.ColumnDefinitions>
                    <ContentPresenter x:Name="Icon"  Content="{TemplateBinding Icon}" ContentSource="Icon" Margin="3"  HorizontalAlignment="Stretch"   SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="Center"/>
                    <Path x:Name="GlyphPanel" Data="F1M10,1.2L4.7,9.1 4.5,9.1 0,5.2 1.3,3.5 4.3,6.1 8.3,0 10,1.2z" Fill="{TemplateBinding Foreground}" FlowDirection="LeftToRight" Margin="3" Visibility="Collapsed" VerticalAlignment="Center"/>
                    <ContentPresenter TextElement.FontSize="20"  ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" Grid.Column="1" ContentStringFormat="{TemplateBinding HeaderStringFormat}" ContentSource="Header" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                    <Popup Grid.Column="1" x:Name="PART_Popup"  AllowsTransparency="True" Focusable="False" IsOpen="{Binding IsSubmenuOpen, RelativeSource={RelativeSource TemplatedParent}}" PopupAnimation="{DynamicResource {x:Static SystemParameters.MenuPopupAnimationKey}}" Placement="Right">
                        <Border x:Name="SubMenuBorder" BorderBrush="#FF999999" BorderThickness="1" Background="#FFF0F0F0" Padding="2">
                            <ScrollViewer x:Name="SubMenuScrollViewer" Style="{DynamicResource {ComponentResourceKey ResourceId=MenuScrollViewer, TypeInTargetAssembly={x:Type FrameworkElement}}}">
                                <Grid RenderOptions.ClearTypeHint="Enabled">
                                    <Canvas HorizontalAlignment="Left" Height="0" VerticalAlignment="Top" Width="0">
                                        <Rectangle x:Name="OpaqueRect" Fill="{Binding Background, ElementName=SubMenuBorder}" Height="{Binding ActualHeight, ElementName=SubMenuBorder}" Width="{Binding ActualWidth, ElementName=SubMenuBorder}"/>
                                    </Canvas>
                                    <Rectangle Fill="#FFD7D7D7" HorizontalAlignment="Left" Margin="29,2,0,2" Width="1"/>
                                    <ItemsPresenter x:Name="ItemsPresenter" KeyboardNavigation.DirectionalNavigation="Cycle" Grid.IsSharedSizeScope="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" KeyboardNavigation.TabNavigation="Cycle"/>
                                </Grid>
                            </ScrollViewer>
                        </Border>
                    </Popup>
                </Grid>
            </Border>
            <ControlTemplate.Triggers>
                <Trigger Property="IsSuspendingPopupAnimation" Value="True">
                    <Setter Property="PopupAnimation" TargetName="PART_Popup" Value="None"/>
                </Trigger>
                <Trigger Property="Icon" Value="{x:Null}">
                    <Setter Property="Visibility" TargetName="Icon" Value="Collapsed"/>
                </Trigger>
                <Trigger Property="IsChecked" Value="True">
                    <Setter Property="Background" TargetName="templateRoot" Value="#2d78d6"/>
                    <Setter Property="BorderBrush" TargetName="templateRoot" Value="#2d78d6"/>
                </Trigger>
                <Trigger Property="IsHighlighted" Value="True">
                    <Setter Property="Background" TargetName="templateRoot" Value="#2d78d6"/>
                    <Setter Property="BorderBrush" TargetName="templateRoot" Value="#2d78d6"/>
                </Trigger>
                <Trigger Property="IsEnabled" Value="False">
                    <Setter Property="TextElement.Foreground" TargetName="templateRoot" Value="#FF707070"/>
                    <Setter Property="Fill" TargetName="GlyphPanel" Value="#FF707070"/>
                </Trigger>
                <Trigger Property="CanContentScroll" SourceName="SubMenuScrollViewer" Value="False">
                    <Setter Property="Canvas.Top" TargetName="OpaqueRect" Value="{Binding VerticalOffset, ElementName=SubMenuScrollViewer}"/>
                    <Setter Property="Canvas.Left" TargetName="OpaqueRect" Value="{Binding HorizontalOffset, ElementName=SubMenuScrollViewer}"/>
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
    </Setter.Value>
</Setter>
</Style>

如果窗口尺寸缩小,则图像必须缩小,即无法正确缩小,并且MaxWidth工作正常。

0 个答案:

没有答案