如何是杜塞尔多夫菜单?

如何是达拉斯菜单?

10分钟制作UWP亚特兰大菜单,uwp埃及开罗菜单

怎么样是达拉斯菜单?

亚特兰大菜单,指的是一个方可弹出和撤回的侧边栏。在UWP和Android应用中,布达佩斯菜单都格外广阔。

澳门金沙国际 1澳门金沙国际 2

 

10分钟制作UWP波士顿菜单,微软信仰之路。先是大家列出所有须要控制的嵌入知识:

1,SplitView

2,StackPanel

3,ListBox

3,TextBlock

4,RelativePanel

6,Button

7,Grid

==============================

第一,我们来分割主页面,将其分为两块。

1 <Grid.RowDefinitions>
2     <RowDefinition Height="Auto" />
3     <RowDefinition Height="*" />
4 </Grid.RowDefinitions>

澳门金沙国际,尔后,用RelativePanel将按钮固定在率先块的左边。Segoe MDL2
Assets是一款Windows 10放置的字体,E700是布加勒斯特菜单的“三”字图标。

1 <RelativePanel>
2     <Button Name="HamburgerButton" FontFamily="Segoe MDL2 Assets" Content="&#xE700;" FontSize="36" Click="HamburgerButton_Click" />
3 </RelativePanel>

大家先定义SplitView,再将Button的点击事件改成控制菜单的开合。

 1  <SplitView Name="MySplitView" 
 2             Grid.Row="1" 
 3             DisplayMode="CompactOverlay" 
 4             OpenPaneLength="200" 
 5             CompactPaneLength="56" 
 6             HorizontalAlignment="Left">
 7     <SplitView.Pane>
 8         <!--这里写菜单内的东西-->
 9     </SplitView.Pane>
10     <SplitView.Content>
11         <!--这里写菜单外的东西-->
12     </SplitView.Content>
13 </SplitView>

注意,那里SplitView的次第属性:

  DisplayMode指弹出和撤销的法门,有三种,效果各不等同。

  OpenPaneLength和CompactPaneLength分别指弹出菜谱长度和撤消菜单长度。

 

接下来设置按钮事件。

private void HamburgerButton_Click(object sender, RoutedEventArgs e)
{
    MySplitView.IsPaneOpen = !MySplitView.IsPaneOpen;
}

 

后来,设置菜单里的选项。

 1 <ListBox SelectionMode="Single" 
 2          Name="IconsListBox" 
 3          SelectionChanged="IconsListBox_SelectionChanged">
 4     <ListBoxItem Name="ShareListBoxItem">
 5         <StackPanel Orientation="Horizontal">
 6             <TextBlock FontFamily="Segoe MDL2 Assets" FontSize="36" Text="&#xE72D;" />
 7             <TextBlock Text="Share" FontSize="24" Margin="20,0,0,0" />
 8         </StackPanel>
 9     </ListBoxItem>
10 
11     <ListBoxItem Name="FavoritesListBoxItem">
12         <StackPanel Orientation="Horizontal">
13             <TextBlock FontFamily="Segoe MDL2 Assets" FontSize="36" Text="&#xE734;" />
14             <TextBlock Text="Favorites" FontSize="24" Margin="20,0,0,0" />
15         </StackPanel>
16     </ListBoxItem>
17 </ListBox>

自己将ListBox的选拔方式设为Single,代表单选,同时安装一个风云。

自我将每一个ListBoxItem设为一个StackPanel,横向堆叠了图标和文字,同时展开了微调。

接下去设置拔取事件。

1 private void IconsListBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
2     {
3     if (ShareListBoxItem.IsSelected) {}
4     else if (FavoritesListBoxItem.IsSelected) {}
5     }

一个简单的波士顿菜单设置落成。

接下去贴出完整XAML代码。

 1 <Page
 2     x:Class="HamburgerExample.MainPage"
 3     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 4     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 5     xmlns:local="using:HamburgerExample"
 6     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
 7     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
 8     mc:Ignorable="d">
 9 
10     <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
11         <Grid.RowDefinitions>
12             <RowDefinition Height="Auto" />
13             <RowDefinition Height="*" />
14         </Grid.RowDefinitions>
15         <RelativePanel>
16             <Button Name="HamburgerButton" FontFamily="Segoe MDL2 Assets" Content="&#xE700;" FontSize="36" Click="HamburgerButton_Click" />
17         </RelativePanel>
18         <SplitView Name="MySplitView" 
19                    Grid.Row="1" 
20                    DisplayMode="CompactOverlay" 
21                    OpenPaneLength="200" 
22                    CompactPaneLength="56" 
23                    HorizontalAlignment="Left">
24             <SplitView.Pane>
25                 <ListBox SelectionMode="Single" 
26                          Name="IconsListBox" 
27                          SelectionChanged="IconsListBox_SelectionChanged">
28                     <ListBoxItem Name="ShareListBoxItem">
29                         <StackPanel Orientation="Horizontal">
30                             <TextBlock FontFamily="Segoe MDL2 Assets" FontSize="36" Text="&#xE72D;" />
31                             <TextBlock Text="Share" FontSize="24" Margin="20,0,0,0" />
32                         </StackPanel>
33                     </ListBoxItem>
34 
35                     <ListBoxItem Name="FavoritesListBoxItem">
36                         <StackPanel Orientation="Horizontal">
37                             <TextBlock FontFamily="Segoe MDL2 Assets" FontSize="36" Text="&#xE734;" />
38                             <TextBlock Text="Favorites" FontSize="24" Margin="20,0,0,0" />
39                         </StackPanel>
40                     </ListBoxItem>
41 
42                 </ListBox>
43             </SplitView.Pane>
44             <SplitView.Content>
45                 <TextBlock Name="ResultTextBlock" />
46             </SplitView.Content>
47         </SplitView>
48         
49     </Grid>
50 </Page>

 

什么是布达佩斯菜单?
布拉格菜单,指的是一个得以弹出和注销的侧边栏。在UWP和Android应用中,亚特兰大菜单都…

在布局中,大家寻常会看到布达佩斯菜单。它大体是那几个样子的:

布达佩斯菜单,指的是一个方可弹出和注销的侧边栏。在UWP和Android应用中,罗马菜单都极度广阔。

杜塞尔多夫菜单,指的是一个可以弹出和撤回的侧边栏。在UWP和Android应用中,布拉格菜单都丰盛普遍。

澳门金沙国际 3

澳门金沙国际 4澳门金沙国际 5

澳门金沙国际 6澳门金沙国际 7

波士顿菜单成效图

 

 

那么那几个是咋办出来的啊?

率先大家列出所有需求控制的嵌入知识:

首先大家列出所有须要控制的放到知识:

SplitView控件


做一个奥克兰菜单,首先要动用SplitView控件。SplitView控件可以创制一个面板。这几个面板可以显得或者隐藏,而且在切换的时候用动画效果。

SplitView分为多个部分。第一片段是可选的,也就是Pane部分;另一部分是必须的,也就是Content部分。

澳门金沙国际 8

SplitView的八个部分

代码的结构大体上是这么:

<SplitView>
    <SplitView.Pane>
        <TextBlock Text="Pane" />
    </SplitView.Pane>
    <SplitView.Content>
         <TextBlock Text="Content" />
    </SplitView.Content>
</SplitView>

内需注意的是,Pane和Content属性只好被安装四遍。由此里面只可以分包一个标签。若是要插手多少个公文,则要用一个Grid或者其它包蕴起来。

1,SplitView

1,SplitView

SplitView的属性


SplitView包蕴多少个很是的习性。利用那几个属性,大家就可以做出布拉格菜单的职能来。
先是是IsPaneOpen。这几个值表现Pane是显示照旧隐藏,而且默许是隐匿的。
附带是DisplayMode。DisplayMode有多种方式。

  • inline
  • overlay
  • CompactInline
  • CompactOverlay
    眼前加不加Compact的界别在于是或不是不完全隐形。加上Compact就会呈现出部分。例如有诸多埃及开罗菜单会显得一个图标。inline属性在突显的时候,会将Content的内容推开,而overlay属性则会将Content的情节覆盖。
    借使加上了Compact,则要求CompactPaneLength属性来设置突显的有点。默认是48px。而还有OpenPaneLength属性,表示显示出来的时候,占多少个像素。当然还有其余的习性,例如可以通过BackGround去设置Content的背景颜色。

2,StackPanel

2,StackPanel

Icon


我们要做一个简易版的赫尔辛基菜单。那个波士顿菜单在隐蔽的时候,突显图标,而显得的时候显得出图标和文字。为了达到这些目标,大家先驾驭明白UWP中的Icon控件。
Icon有三种方法,分别是:

  • 标记图标SymbolIcon:那是依据Segoe UI Symbol字体的约定义好的符号列表
  • 字体图标FontIcon:可以行使字体来体现图标
  • 位图图标BitmapIcon:使用位图的图标,缺点是或不是矢量的,有可能走样
  • 途径图标PathIcon:基于Path的图标
  • 自定义图标

在此地大家只必要SymbolIcon和FontIcon就丰富了。
SymbolIcon最为简练。只须求在里面安装自带的Icon就够用了。
代码如下:

<SymbolIcon Symbol="Switch" />

Symbol可以一直在编辑器中选用。微软的官网也有一览表,方便查看。
https://msdn.microsoft.com/zh-cn/library/windows/apps/windows.ui.xaml.controls.symbol.aspx

FontIcon本质上是字体。大家在搜索适合的字符图标的时候,可以先唤出Cortana,辅助大家找到字符映射表。再从字符映射表中挑选合适的图标。

澳门金沙国际 9

字符映射表

如图找到了空心雪人的图标。于是大家的代码如下:

<FontIcon FontFamily="Segoe UI Emoji" Glyph="$#x26c7;" />

3,ListBox

3,ListBox

ListBox


ListBox由众多少个ListBoxItem组成。每一个Item可以有和好的定义。于是大家定义多少个大概的,只含有图标和文件的Item就行了。这里大家写了多少个ListBoxItem。一个是鹏程我们要写点击裁减的部分,另一个是“首页”。分别用了二种差其他Icon。

<ListBox>
     <ListBoxItem Name="HamburgerButton" Margin="0,5,0,5">
         <StackPanel Orientation="Horizontal" >
             <FontIcon FontFamily="Segoe MDL2 Assets" Glyph=""/>
         </StackPanel>
     </ListBoxItem>
     <ListBoxItem Margin="0,5,0,5">
         <StackPanel Orientation="Horizontal" >
              <SymbolIcon Symbol="Emoji2" />
              <TextBlock Text="首页" Margin="24,0,0,0" VerticalAlignment="Center" />
         </StackPanel>
     </ListBoxItem>
</ListBox>

3,TextBlock

3,TextBlock

ListBox绑定事件


咱俩需求在按Name为HamburgerButton的Item时,达拉斯菜单隐藏或者出现。为了达到那一个目标,大家务必给那一个Item绑定事件。当然大家也可以用双向绑定。可是向来绑定事件会更为简明。而且学会绑定事件,也足以衣冠优孟地达成其余Item的意义。
在ListBox控件里面没有直接的Click,可是咱们找到一个质量:SelectionChanged。当有东西被选中的时候,就调用其绑定的章程。于是我们在代码里面参预了这么些特性。

<ListBox SelectionMode="Single" SelectionChanged="ListBox_SelectionChanged">

接着大家在cs文件之中已毕这么些法子。

private void ListBox_SelectionChanged(object sender, SelectionChangedEventArgs e)  {
   if (HamburgerButton.IsSelected) {
      RootSplitView.IsPaneOpen = !RootSplitView.IsPaneOpen;
      HamburgerButton.IsSelected = false;
   }
}

当调用这些艺术的时候,大家先判断是哪个Item被选中了。在那里,大家是直接判断HamburgerButton是或不是被入选。当HamburButton被选中时,我们将IsPaneOpen取反(先安装SplitView的Name,那里为RootSplitView)。接着,由于我们要双重按Item的时候,菜单重新出现,所有大家要保管原来的保持没有被选中的场地,即HamburgerButton.IsSelected
= false。
前景,我们必要完毕点击任何Item的效应时,只必要在那个点子里面添加其他作用就行。

4,RelativePanel

4,RelativePanel

自适应布局


末尾,大家进入自适应布局。使得在窗口比较窄的时候,菜单隐藏,窗口相比较宽的时候显得出来。那一个比较不难,只要求在Setter里面设置IsPaneOpen即可。代码如下:

<VisualStateManager.VisualStateGroups>
   <VisualStateGroup x:Name="VisualStateGroup">
      <VisualState x:Name="VisualStateMin0">
         <VisualState.Setters>
           <Setter Target="RootSplitView.IsPaneOpen" Value="False" />
         </VisualState.Setters>
         <VisualState.StateTriggers>
            <AdaptiveTrigger MinWindowWidth="1"/>
         </VisualState.StateTriggers>
      </VisualState>
      <VisualState x:Name="VisualStateMin800">
         <VisualState.Setters>
            <Setter Target="RootSplitView.IsPaneOpen" Value="True" />
         </VisualState.Setters>
         <VisualState.StateTriggers>
            <AdaptiveTrigger MinWindowWidth="800"/>
         </VisualState.StateTriggers>
     </VisualState>
   </VisualStateGroup>
</VisualStateManager.VisualStateGroups>

日后,一个“乞讨的人版”的拉各斯菜单就完了了。

6,Button

6,Button

7,Grid

7,Grid

==============================

==============================

第一,大家来分割主页面,将其分为两块。

率先,大家来分割主页面,将其分成两块。

1 <Grid.RowDefinitions>
2     <RowDefinition Height="Auto" />
3     <RowDefinition Height="*" />
4 </Grid.RowDefinitions>
1 <Grid.RowDefinitions>
2     <RowDefinition Height="Auto" />
3     <RowDefinition Height="*" />
4 </Grid.RowDefinitions>

然后,用RelativePanel将按钮固定在率先块的左手。Segoe MDL2
Assets是一款Windows 10置于的书体,E700是赫尔辛基菜单的“三”字图标。

尔后,用RelativePanel将按钮固定在率先块的左手。Segoe MDL2
Assets是一款Windows 10放置的书体,E700是布达佩斯菜单的“三”字图标。

1 <RelativePanel>
2     <Button Name="HamburgerButton" FontFamily="Segoe MDL2 Assets" Content="&#xE700;" FontSize="36" Click="HamburgerButton_Click" />
3 </RelativePanel>
1 <RelativePanel>
2     <Button Name="HamburgerButton" FontFamily="Segoe MDL2 Assets" Content="&#xE700;" FontSize="36" Click="HamburgerButton_Click" />
3 </RelativePanel>

咱俩先定义SplitView,再将Button的点击事件改成控制菜单的开合。

咱俩先定义SplitView,再将Button的点击事件改成控制菜单的开合。

 1  <SplitView Name="MySplitView" 
 2             Grid.Row="1" 
 3             DisplayMode="CompactOverlay" 
 4             OpenPaneLength="200" 
 5             CompactPaneLength="56" 
 6             HorizontalAlignment="Left">
 7     <SplitView.Pane>
 8         <!--这里写菜单内的东西-->
 9     </SplitView.Pane>
10     <SplitView.Content>
11         <!--这里写菜单外的东西-->
12     </SplitView.Content>
13 </SplitView>
 1  <SplitView Name="MySplitView" 
 2             Grid.Row="1" 
 3             DisplayMode="CompactOverlay" 
 4             OpenPaneLength="200" 
 5             CompactPaneLength="56" 
 6             HorizontalAlignment="Left">
 7     <SplitView.Pane>
 8         <!--这里写菜单内的东西-->
 9     </SplitView.Pane>
10     <SplitView.Content>
11         <!--这里写菜单外的东西-->
12     </SplitView.Content>
13 </SplitView>

在意,这里SplitView的顺序属性:

留神,那里SplitView的逐一属性:

  DisplayMode指弹出和收回的措施,有多样,效果各不均等。

  DisplayMode指弹出和撤回的格局,有多样,效果各差异。

  OpenPaneLength和CompactPaneLength分别指弹出菜谱长度和注销菜单长度。

  OpenPaneLength和CompactPaneLength分别指弹出菜谱长度和收回菜单长度。

 

 

接下来设置按钮事件。

下一场设置按钮事件。

private void HamburgerButton_Click(object sender, RoutedEventArgs e)
{
    MySplitView.IsPaneOpen = !MySplitView.IsPaneOpen;
}
private void HamburgerButton_Click(object sender, RoutedEventArgs e)
{
    MySplitView.IsPaneOpen = !MySplitView.IsPaneOpen;
}

 

 

日后,设置菜单里的选项。

此后,设置菜单里的选项。

 1 <ListBox SelectionMode="Single" 
 2          Name="IconsListBox" 
 3          SelectionChanged="IconsListBox_SelectionChanged">
 4     <ListBoxItem Name="ShareListBoxItem">
 5         <StackPanel Orientation="Horizontal">
 6             <TextBlock FontFamily="Segoe MDL2 Assets" FontSize="36" Text="&#xE72D;" />
 7             <TextBlock Text="Share" FontSize="24" Margin="20,0,0,0" />
 8         </StackPanel>
 9     </ListBoxItem>
10 
11     <ListBoxItem Name="FavoritesListBoxItem">
12         <StackPanel Orientation="Horizontal">
13             <TextBlock FontFamily="Segoe MDL2 Assets" FontSize="36" Text="&#xE734;" />
14             <TextBlock Text="Favorites" FontSize="24" Margin="20,0,0,0" />
15         </StackPanel>
16     </ListBoxItem>
17 </ListBox>
 1 <ListBox SelectionMode="Single" 
 2          Name="IconsListBox" 
 3          SelectionChanged="IconsListBox_SelectionChanged">
 4     <ListBoxItem Name="ShareListBoxItem">
 5         <StackPanel Orientation="Horizontal">
 6             <TextBlock FontFamily="Segoe MDL2 Assets" FontSize="36" Text="&#xE72D;" />
 7             <TextBlock Text="Share" FontSize="24" Margin="20,0,0,0" />
 8         </StackPanel>
 9     </ListBoxItem>
10 
11     <ListBoxItem Name="FavoritesListBoxItem">
12         <StackPanel Orientation="Horizontal">
13             <TextBlock FontFamily="Segoe MDL2 Assets" FontSize="36" Text="&#xE734;" />
14             <TextBlock Text="Favorites" FontSize="24" Margin="20,0,0,0" />
15         </StackPanel>
16     </ListBoxItem>
17 </ListBox>

自家将ListBox的抉择情势设为Single,代表单选,同时设置一个轩然大波。

自我将ListBox的挑三拣四情势设为Single,代表单选,同时安装一个风浪。

自家将每一个ListBoxItem设为一个StackPanel,横向堆叠了图标和文字,同时展开了微调。

自我将每一个ListBoxItem设为一个StackPanel,横向堆叠了图标和文字,同时展开了微调。

接下去设置拔取事件。

接下去设置拔取事件。

1 private void IconsListBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
2     {
3     if (ShareListBoxItem.IsSelected) {}
4     else if (FavoritesListBoxItem.IsSelected) {}
5     }
1 private void IconsListBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
2     {
3     if (ShareListBoxItem.IsSelected) {}
4     else if (FavoritesListBoxItem.IsSelected) {}
5     }

一个简易的布加勒斯特菜单设置达成。

一个粗略的罗马菜单设置达成。

接下去贴出完整XAML代码。

接下去贴出完整XAML代码。

 1 <Page
 2     x:Class="HamburgerExample.MainPage"
 3     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 4     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 5     xmlns:local="using:HamburgerExample"
 6     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
 7     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
 8     mc:Ignorable="d">
 9 
10     <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
11         <Grid.RowDefinitions>
12             <RowDefinition Height="Auto" />
13             <RowDefinition Height="*" />
14         </Grid.RowDefinitions>
15         <RelativePanel>
16             <Button Name="HamburgerButton" FontFamily="Segoe MDL2 Assets" Content="&#xE700;" FontSize="36" Click="HamburgerButton_Click" />
17         </RelativePanel>
18         <SplitView Name="MySplitView" 
19                    Grid.Row="1" 
20                    DisplayMode="CompactOverlay" 
21                    OpenPaneLength="200" 
22                    CompactPaneLength="56" 
23                    HorizontalAlignment="Left">
24             <SplitView.Pane>
25                 <ListBox SelectionMode="Single" 
26                          Name="IconsListBox" 
27                          SelectionChanged="IconsListBox_SelectionChanged">
28                     <ListBoxItem Name="ShareListBoxItem">
29                         <StackPanel Orientation="Horizontal">
30                             <TextBlock FontFamily="Segoe MDL2 Assets" FontSize="36" Text="&#xE72D;" />
31                             <TextBlock Text="Share" FontSize="24" Margin="20,0,0,0" />
32                         </StackPanel>
33                     </ListBoxItem>
34 
35                     <ListBoxItem Name="FavoritesListBoxItem">
36                         <StackPanel Orientation="Horizontal">
37                             <TextBlock FontFamily="Segoe MDL2 Assets" FontSize="36" Text="&#xE734;" />
38                             <TextBlock Text="Favorites" FontSize="24" Margin="20,0,0,0" />
39                         </StackPanel>
40                     </ListBoxItem>
41 
42                 </ListBox>
43             </SplitView.Pane>
44             <SplitView.Content>
45                 <TextBlock Name="ResultTextBlock" />
46             </SplitView.Content>
47         </SplitView>
48         
49     </Grid>
50 </Page>
 1 <Page
 2     x:Class="HamburgerExample.MainPage"
 3     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 4     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 5     xmlns:local="using:HamburgerExample"
 6     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
 7     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
 8     mc:Ignorable="d">
 9 
10     <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
11         <Grid.RowDefinitions>
12             <RowDefinition Height="Auto" />
13             <RowDefinition Height="*" />
14         </Grid.RowDefinitions>
15         <RelativePanel>
16             <Button Name="HamburgerButton" FontFamily="Segoe MDL2 Assets" Content="&#xE700;" FontSize="36" Click="HamburgerButton_Click" />
17         </RelativePanel>
18         <SplitView Name="MySplitView" 
19                    Grid.Row="1" 
20                    DisplayMode="CompactOverlay" 
21                    OpenPaneLength="200" 
22                    CompactPaneLength="56" 
23                    HorizontalAlignment="Left">
24             <SplitView.Pane>
25                 <ListBox SelectionMode="Single" 
26                          Name="IconsListBox" 
27                          SelectionChanged="IconsListBox_SelectionChanged">
28                     <ListBoxItem Name="ShareListBoxItem">
29                         <StackPanel Orientation="Horizontal">
30                             <TextBlock FontFamily="Segoe MDL2 Assets" FontSize="36" Text="&#xE72D;" />
31                             <TextBlock Text="Share" FontSize="24" Margin="20,0,0,0" />
32                         </StackPanel>
33                     </ListBoxItem>
34 
35                     <ListBoxItem Name="FavoritesListBoxItem">
36                         <StackPanel Orientation="Horizontal">
37                             <TextBlock FontFamily="Segoe MDL2 Assets" FontSize="36" Text="&#xE734;" />
38                             <TextBlock Text="Favorites" FontSize="24" Margin="20,0,0,0" />
39                         </StackPanel>
40                     </ListBoxItem>
41 
42                 </ListBox>
43             </SplitView.Pane>
44             <SplitView.Content>
45                 <TextBlock Name="ResultTextBlock" />
46             </SplitView.Content>
47         </SplitView>
48         
49     </Grid>
50 </Page>

 

 

相关文章