关闭

win10 uwp 自定义控件 SplitViewItem

标签: win10uwp控件
3356人阅读 评论(0) 收藏 举报
分类:

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

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

我开始写

                            <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

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:482573次
    • 积分:7633
    • 等级:
    • 排名:第2959名
    • 原创:207篇
    • 转载:16篇
    • 译文:24篇
    • 评论:212条
    博客专栏
    文章分类
    最新评论