win10 uwp 自定义控件 SplitViewItem

来源：互联网发布：淘宝一周流量分布编辑：程序博客网时间：2024/05/21 11:00

本文主要是因为汉堡菜单里面列出的菜单很多重复的图标和文字，我把它作为控件，因为是随便写，可能存在错误，如果发现了，请和我说或关掉浏览器，请不要发不良言论。

我们使用汉堡菜单，经常需要一个
这里写图片描述
需要一个图标和一个文字

我开始写

                            <ListViewItem.Content>                                <StackPanel Orientation="Horizontal">                                    <TextBlock Margin="10,10,10,10" FontFamily="Segoe MDL2 Assets"                                         Text="&#xE77B;"></TextBlock>                                    <TextBlock Margin="10,10,10,10" Text="登录"></TextBlock>                                </StackPanel>                            </ListViewItem.Content>

因为需要写3个，我觉得复制不好，因为我还有很多软件，如果每个都这样，那么在TextBlock使用
这里写图片描述
很多都是一样的

自己创建控件，右击添加控件

在控件

    <Grid>        <StackPanel Orientation="Horizontal">            <TextBlock Margin="10,10,10,10" FontFamily="Segoe MDL2 Assets"                       Text="{x:Bind IconString}"></TextBlock>            <TextBlock Margin="10,10,10,10" Text="{x:Bind Text}"></TextBlock>        </StackPanel>    </Grid>

然后在SplitViewItem.xaml.cs

属性IconString，Text

        public static readonly DependencyProperty IconStringProperty = DependencyProperty.Register(            "IconString", typeof(string), typeof(SplitViewItem), new PropertyMetadata(default(string)));        public string IconString        {            set            {                SetValue(IconStringProperty, value);            }            get            {                return (string) GetValue(IconStringProperty);            }        }        public static readonly DependencyProperty TextProperty = DependencyProperty.Register(            "Text", typeof(string), typeof(SplitViewItem), new PropertyMetadata(default(string)));        public string Text        {            set            {                SetValue(TextProperty, value);            }            get            {                return (string) GetValue(TextProperty);            }        }

我把SplitViewItem扔View文件夹，在使用

xmlns:view="using:EncryptionSyncFolder.View"

本来需要很长的代码，现在修改成为一点点，其实就是导入我的自定义控件，首先在上面的代码是把view用作我的控件所在文件夹，反人类的Segoe MDL2 Assets 可以在http://modernicons.io/segoe-mdl2/cheatsheet/，找到你要的图标

                        <ListViewItem>                            <ListViewItem.Content>                               <Grid>                                    <view:SplitViewItem IconString="&#xE713;" Text="设置"></view:SplitViewItem>                               </Grid>                            </ListViewItem.Content>                        </ListViewItem>

因为每次都需要找汉堡，所以我就做模板

        <Grid>            <Grid.RowDefinitions>                <RowDefinition Height="50"/>                <RowDefinition Height="15*"/>            </Grid.RowDefinitions>            <Grid Grid.Row="0">                <ToggleButton x:Name="SplitToggleButton" >                    <ToggleButton.Content>                        <TextBlock FontFamily="Segoe MDL2 Assets" Text="&#xE700;"></TextBlock>                    </ToggleButton.Content>                </ToggleButton>            </Grid>            <SplitView Grid.Row="1" IsPaneOpen="{Binding ElementName=SplitToggleButton,Path=IsChecked,Mode=TwoWay}"                   DisplayMode="CompactOverlay" OpenPaneLength="100"                    CompactPaneLength="50" >                <SplitView.Pane>                    <Grid>                    </Grid>                </SplitView.Pane>                <SplitView.Content>                    <Grid>                        <Frame ></Frame>                    </Grid>                </SplitView.Content>            </SplitView>        </Grid>

知识共享许可协议
本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。欢迎转载、使用、重新发布，但务必保留文章署名林德熙(包含链接:http://blog.csdn.net/lindexi_gd )，不得用于商业目的，基于本文修改后的作品务必以相同的许可发布。如有任何疑问，请与我联系。

5 0