我一直在用Windows窗体开发一些简单的应用程序(只是出于教育目的),现在我开始学习WPF,但对我来说它似乎有点复杂。我想创建一个简单的菜单,就像你在图片中看到的那样。我一直试图在谷歌和YouTube上找到它,但我只找到了关于“汉堡菜单”的教程,这不是我要找的。
14ifxucb1#
这确实是WPF大放异彩的领域:你所描述的布局只需要一个重新设计样式的选项卡控件就可以实现。从TabStripPlacement为Left的无样式选项卡控件开始:
TabStripPlacement
Left
然后编辑TabControl样式,在TabPanel后面添加渐变和边距:
TabControl
TabPanel
添加图像并覆盖TabItem样式以设置字体并删除背景。我使用了一个V形来指示选择而不是加粗文本,但这将以相同的方式处理。
TabItem
下面是用于上面截图的完整XAML:
<Window x:Class="StackOverflowTabControl.MainWindow" 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" xmlns:local="clr-namespace:StackOverflowTabControl" mc:Ignorable="d" Title="MainWindow" Height="350" Width="525"> <Window.Resources> <BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter"/> <Style x:Key="ItemContainerStyle" TargetType="{x:Type TabItem}"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type TabItem}"> <Grid Margin="15,5"> <Path Width="10" Height="14" Margin="0,2,0,0" HorizontalAlignment="Left" VerticalAlignment="Center" Stretch="Fill" Fill="#FF000000" Data="F1 M 39.8307,37.6042L 36.6641,34.4375L 25.1849,23.3542L 35.4766,23.3542L 50.5182,37.6042L 35.4766,51.8542L 25.1849,51.8542L 36.6641,40.7708L 39.8307,37.6042 Z " Visibility="{Binding IsSelected, Converter={StaticResource BooleanToVisibilityConverter}, RelativeSource={RelativeSource TemplatedParent}}"/> <ContentPresenter Content="{TemplateBinding Header}" Margin="20,5,10,5"> <ContentPresenter.Resources> <Style TargetType="{x:Type TextBlock}"> <Setter Property="FontSize" Value="18" /> <Setter Property="FontWeight" Value="Light" /> </Style> </ContentPresenter.Resources> </ContentPresenter> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style> <Style x:Key="TabControlStyle1" TargetType="{x:Type TabControl}"> <Setter Property="TabStripPlacement" Value="Left" /> <Setter Property="ItemContainerStyle" Value="{StaticResource ItemContainerStyle}" /> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type TabControl}"> <Grid x:Name="templateRoot" ClipToBounds="true" SnapsToDevicePixels="true" KeyboardNavigation.TabNavigation="Local"> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto" /> <ColumnDefinition Width="1*" /> </Grid.ColumnDefinitions> <Border Grid.Column="0" Padding="5"> <Border.Background> <LinearGradientBrush EndPoint="0,0" StartPoint="1,0"> <GradientStop Color="#FFC7C7C7" Offset="0"/> <GradientStop Color="#FFECECEC" Offset="1"/> </LinearGradientBrush> </Border.Background> <DockPanel> <Image DockPanel.Dock="Bottom" HorizontalAlignment="Center" Margin="20" Source="pack://application:,,,/StackOverflowTabControl;component/twc.png" Width="200" /> <TabPanel x:Name="headerPanel" Background="Transparent" Grid.Column="0" IsItemsHost="true" Margin="2,2,2,0" Grid.Row="0" KeyboardNavigation.TabIndex="1" Panel.ZIndex="1"/> </DockPanel> </Border> <Border x:Name="contentPanel" Grid.Column="1" Margin="5,0,0,0"> <ContentPresenter x:Name="PART_SelectedContentHost" ContentSource="SelectedContent" Margin="{TemplateBinding Padding}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/> </Border> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style> </Window.Resources> <Grid> <TabControl Style="{DynamicResource TabControlStyle1}"> <TabItem Header="System Information"> <TextBlock Text="Windows 10 pro" /> </TabItem> <TabItem Header="Something else"> <TextBlock Text="Other page" /> </TabItem> </TabControl> </Grid> </Window>
1条答案
按热度按时间14ifxucb1#
这确实是WPF大放异彩的领域:你所描述的布局只需要一个重新设计样式的选项卡控件就可以实现。
从
TabStripPlacement
为Left
的无样式选项卡控件开始:然后编辑
TabControl
样式,在TabPanel
后面添加渐变和边距:添加图像并覆盖
TabItem
样式以设置字体并删除背景。我使用了一个V形来指示选择而不是加粗文本,但这将以相同的方式处理。下面是用于上面截图的完整XAML: