WIN10 UWP Custom Controls Splitviewitem

Source: Internet
Author: User
Tags creative commons attribution

This article is mainly because of the menu listed in the Hamburger menu a lot of duplicate icons and text, I use it as a control, because it is casually written, there may be errors, if found, please tell me or switch off the browser, please do not make bad remarks.

We use the burger menu and often need a

Need an icon and a text

I started writing

                            <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="Login"></TextBlock>                                </StackPanel>                            </listviewitem.content>

Because of the need to write 3, I think the copy is not good, because I have a lot of software, if each is so, then in TextBlock use

A lot of them are the same.

Create your own controls, right-click to add controls

In the control

    <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>

And then inSplitViewItem.xaml.cs

Property Iconstring,text

         Public Static ReadOnlyDependencyProperty Iconstringproperty = Dependencyproperty.register ("Iconstring",typeof(string),typeof(Splitviewitem),NewPropertyMetadata (default(string))); Public stringiconstring {Set{SetValue (Iconstringproperty,value); }Get{return(string) GetValue (Iconstringproperty); }        } Public Static ReadOnlyDependencyProperty Textproperty = Dependencyproperty.register ("Text",typeof(string),typeof(Splitviewitem),NewPropertyMetadata (default(string))); Public stringText {Set{SetValue (Textproperty,value); }Get{return(string) GetValue (Textproperty); }        }

I threw the splitviewitem into the View folder, using the


Would have required a very long code, now modified to become a little bit, is actually imported my custom control, first in the above code is to use view as my Control folder, anti-human segoe MDL2 Assets can be in segoe-mdl2/cheatsheet/, find the icon you want.

                        <listviewitem>                            <listviewitem.content>                               <Grid>                                    <view:splitviewitem iconstring="& #xE713;" Text="Settings"></view:splitviewitem>                               </Grid>                            </listviewitem.content>                        </ListViewItem>

Because I need to find a hamburger every time, so I do the template

        <Grid>            <grid.rowdefinitions>                <rowdefinition Height="/> "                <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="compactpanelength" = " >                                        "                <splitview.pane>                    <Grid>                    </Grid>                </splitview.pane>                <splitview.content>                    <Grid>                        <Frame ></Frame>                    </Grid>                </splitview.content>            </SplitView>        </Grid>

This work is licensed under the Creative Commons Attribution-NonCommercial use-Share 4.0 International license agreement in the same way. Welcome to reprint, use, republish, but be sure to keep the article Attribution Lindesi (including Link:, not for commercial purposes, based on the modified works of this article must be issued with the same license. If you have any questions, please contact me.

WIN10 UWP Custom Controls Splitviewitem

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.