This blog covers the use of the Symbol Enumeration class as the displayed icon of XAML buttons. Data binding of them to ViewBoxes is also covered including in a MenuItem template. This includes implicitly creating a list of Symbols for the menu in a couple of lines of code. AppBars are also covered

Sample Code

The code for this blog is on Codeplex as Universal Windows 10 SDK App Icons

Some relevant links:

 

The Symbol Class

The Symbol class is an enumeration (enum) of Symbols that can be used as icons in XAML code as such things a button content, Each enum has a image, name and enum integer (I use uint) .  For example, the Next Symbol, as below,  has an enum value of 57601.

image

 

The following is the XAML code to display the Camera icon on a button:

        <Button Grid.Row="0" Grid.Column="1" x:Name="CameraButton" Tapped="buttonCamera_Tapped"
IsEnabled="True" HorizontalAlignment="Left" Margin="0"> <Viewbox MaxHeight="40" MaxWidth="40" > <SymbolIcon Symbol="Camera"/> </Viewbox> </Button>

When you type <SymbolIcon Symbol= (as in above XAML code) Intellisense will present a menu of Symbol name to choose from:

image

 

To find the icon you want, you might scour the lists on the first two links 

 

The rest of this blog discusses how to use the Symbols as icons in detail as per the Sample Code..

Creating the App

You create a Windows 10 Universal Windows Blank C# App Project in Visual Studio 2015 ( I used Relase 2).

Then add the following row and column definitions for the Grid (inside of it) on MainPage.xaml:

        <Grid.RowDefinitions>
            <RowDefinition Height="50"/>
            <RowDefinition Height="30"/>
            <RowDefinition Height="50" />
            <RowDefinition Height="50" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="10"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="2*" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>

1. Buttons with Icons

XAML code:

<Button Grid.Row="0" Grid.Column="1" x:Name="CameraButton" Tapped="buttonCamera_Tapped"
HorizontalAlignment="Left"> <Viewbox MaxHeight="40" MaxWidth="40" > <SymbolIcon Symbol="Camera"/> </Viewbox> </Button> <Button Grid.Row="0" Grid.Column="2" x:Name="FlashButton" Tapped="buttonCamera_Tapped"
HorizontalAlignment="Center"> <Viewbox MaxHeight="40" MaxWidth="40"> <SymbolIcon Symbol="SolidStar"/> </Viewbox> </Button>
<
Button Grid.Row="0" Grid.Column="3" x:Name="FrontCameraButton" Tapped="buttonCamera_Tapped"
HorizontalAlignment="Right"> <Viewbox MaxHeight="40" MaxWidth="40"> <SymbolIcon Symbol="RotateCamera"/> </Viewbox>
</
Button>

<
TextBlock Grid.Row="1" Grid.Column="1" Text="Rear" HorizontalAlignment="Left" Margin="0" /> <TextBlock Grid.Row="1" Grid.Column="2" Text="Flash" HorizontalAlignment="Center" /> <TextBlock Grid.Row="1" Grid.Column="3" Text="Front" HorizontalAlignment="Right" />

This presents as three buttons, each with a specific icon as well as descriptive text below for each:

image

 

2. An XAML  Bound Symbol

<RadioButton Grid.Row="2" Grid.Column="1" x:Name="Yes" GroupName="Outcome" Content="Yes" Checked="Decision_Checked"/>
<RadioButton Grid.Row="2" Grid.Column="2" x:Name="No" GroupName="Outcome" Content="No" Checked="Decision_Checked"/>
<RadioButton Grid.Row="2" Grid.Column="3" x:Name="Unknown" GroupName="Outcome" Content="Unknown" 
Checked="Decision_Checked"/> <Viewbox MaxHeight="20" MaxWidth="20" Grid.Row="2" Grid.Column="4" VerticalAlignment="Center"> <SymbolIcon Symbol="{Binding Icon2, Mode=OneWay}"/> </Viewbox>

This presents a group of radio buttons such that the current selected one (being RadioButtons, selection is mutually exclusive) determines the Symbol (Icon2 to display.  This requires some Codebhind in MainPage.xaml.cs as an implementation of Decision_Checked():

        public static Decision _Decision { get; set; } = Decision.Unknown;

        private void Decision_Checked(object sender, RoutedEventArgs e)
        {
            RadioButton rb = (RadioButton)sender;
            if (rb != null)
            {
                switch (rb.Name)
                {
                    case "Yes":
                        _Decision = Decision.Yes;
                        break;
                    case "No":
                        _Decision = Decision.No;
                        break;
                    case "Unknown":
                        _Decision = Decision.Unknown;
                        break;
                }
                //SetDecision();
                ToggleDataContext();
            }
        }

This sets the page property _Decision, of type Decision, depending upon which RadioButton was selected. Decision is a custom enumeration:

        public enum Decision
        {
            Yes,
            No,
            Unknown
        }

The ViewBox SymbolIcon, immediately above,  is bound to the page property Icon2 which makes use of _Decision as follows:

        public Symbol Icon2
        {
            get
            {
                if (_Decision == Decision.Yes)
                {
                    return Symbol.Accept;
                }
                else if (_Decision == Decision.No)
                {
                    return Symbol.Cancel;
                }
                else if (_Decision == Decision.Unknown)
                {
                    return Symbol.Stop;
                }
                else
                    return Symbol.Stop;
            }
        }

Finally, ToggleDataContext() is a simple (quick and dirty) way to force an update to the bound data:

        private void ToggleDataContext()
        {
            MainGrid.DataContext = null;
            MainGrid.DataContext = this;
        }

The three states of this UI are:

image

 

3. Browsing through all Symbols Part 1

The following UI enables you to browse through the Symbols in two manners.  One using [Next] and {Previous buttons.  The second uses a Menu.

Both demonstrate using the Symbol enums at a higher level in XAM code.

The first part of the UI has one ViewBox (circled in red) to display the current symbol. Along with it is displayed its Symbol Name and enum value. There is are [Next] and [Prev] buttons to enable the user to move up and down the enumerated list of Symbols:
image

.

The XAML code for this UI is:

<Button x:Name="Prev" Grid.Row="3" Content="Prev" Grid.Column="1" Tapped="Prev_Tapped"/>
        <Viewbox MaxHeight="20" MaxWidth="20" Grid.Row="3" Grid.Column="2"  VerticalAlignment="Center">
            <SymbolIcon Symbol="{Binding Icon1, Mode=OneWay}"/>
        </Viewbox>
<
TextBlock x:Name="tb" Grid.Row="3" Grid.Column="3" Text ="{Binding Icon1Name, Mode=OneWay}"
VerticalAlignment="Center"/> <TextBlock x:Name="tc" Grid.Row="3" Grid.Column="4" Text ="{Binding Icon1Value, Mode=OneWay}"
VerticalAlignment="Center"/>
<
Button x:Name="Next" Grid.Row="3" Content="Next" Grid.Column="5" Tapped="Next_Tapped"/>

The binding with this UI then are Icon1, Icon1Name, Icon1Value.  Icon1 is manipulated directly by Prev_Tapped() and Next_Tapped():

        Symbol _icon1 = Symbol.Stop;
        public Symbol Icon1 { get { return _icon1; } }

        private void Next_Tapped(object sender, TappedRoutedEventArgs e)
        {
            _icon1 = (Symbol) ( 1+ (uint)_icon1 );
            ToggleDataContext();
        }

        private void Prev_Tapped(object sender, TappedRoutedEventArgs e)
        {
            _icon1 = (Symbol)( ((uint)_icon1) -1);
            ToggleDataContext();
        }

The other two are indirectly modified:

        public string Icon1Name { get { return _icon1.ToString(); } }
        public uint Icon1Value { get { return (uint)_icon1; } }

4. Browsing through all Symbols Part 2

This extends the UI as above to directly set the ViewBox Symbol from a menu listing all Symbols.  Of interest here is the code to generate the list of enums directly from the enums:

        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
            IEnumerable<Symbol> query = Enum.GetValues(typeof(Symbol)).Cast<Symbol>();
            _EnumArrayProp = query.ToList<Symbol>();
        }

        private List<Symbol> _EnumArrayProp;
        public List<Symbol> EnumArrayProp
        {
            get { return _EnumArrayProp; }
        }

EnumArrayProp the list of Symbols, is bound to the menu:

       <ListBox Grid.Row="4" Grid.Column="1" Grid.ColumnSpan="3"  
                x:Name="ListIconz"
                ItemsSource="{Binding}" 
                DataContext = "MainPage.EnumArrayProp"
                SelectionChanged="ListIconz_SelectionChanged" 
                 >
            <ListBox.ItemTemplate>
                <DataTemplate>
                   <Viewbox MaxHeight="30" MaxWidth="30">
                        <SymbolIcon Symbol="{Binding}"/>
                    </Viewbox> 
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>

Note that the XAML code for the menu has been significantly simplified to focus upon the key issues. See the Sample Code on Codeplex for more detail.

ListIconz_SelectionChanged() implements the link between the menu item (Symbol) selected and Icon1 in the previous code:

        private void ListIconz_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            if (ListIconz.SelectedIndex != -1)
            {
                Symbol sym = (Symbol)ListIconz.SelectedItem;
                _icon1 = sym;
                ToggleDataContext();
            }
        }

ToggleDatContext() needs slight modification so that the list of Symbols is enumerated in as the menu list items::

        private void ToggleDataContext()
        {
            MainGrid.DataContext = null;
            MainGrid.DataContext = this;
            ListIconz.DataContext =EnumArrayProp;
        }

image

The complete Ui

AppBars

An AppBar can host a number of Symbols as command buttons.  Specifically an AppBar can be placed on on a page at the top and bottom as explicit XAML code. For example and AppBar  at the bottom (placed at top before the grid):

    <Page.BottomAppBar>
        <AppBar >   <!--IsSticky="True"> -->
            <StackPanel Orientation="Horizontal" >
                <AppBarButton x:Name="RefreshButton" Icon="Refresh" Click="AppBarButton_Click"/>
                <AppBarButton x:Name="HelpButton"  Icon="Help" Click="AppBarButton_Click"/>
            </StackPanel>
        </AppBar>
    </Page.BottomAppBar>

This is displayed as:

image

And when activated:

image


Hopes this helps you. Enjoy Smile