Metro ListBox in WPF

With the latest design strategy of Microsoft, Metro Style is dominating the entire internet. It is not difficult to find many websites adapted some elements of metro style. For Windows 8, you can fully feel the power of Metro Style.

Today, I am going to show you how to turn your ListBox (WPF / Silverlight) into Metro Style.

The result ListBox will be as below.

MetroListBox

ListBox Basic Style

First, we simply drag the ListBox into the Grid, and then we will have to change the default style of the ListBox steps by steps.

As you know the default background of ListBox is white and border brush is gray, so we have to change it to  transparent that is {x:Null}.

And then right click on the ListBox, and edit a copy under Item Container Style

CreateItemContainerStyle

MetroItemStyle

Next, do it in similar way to create an empty style for ItemTemplate.

CreateItemTemplateStyle  MetroItemTemplate

Till now, you will find your ListBox code are as below.

<ListBox HorizontalAlignment="Left" Height="427" VerticalAlignment="Top" Width="266"
         x:Name="LbxMenu" Background="{x:Null}" BorderBrush="{x:Null}"
         ItemTemplate="{DynamicResource MetroListBoxItemTemplate}"
         ItemContainerStyle="{DynamicResource MetroListBoxItemStyle}"
         ItemsSource="{Binding Menu}"/>

Data Template – MetroListBoxItemTemplate

The data template  is about the presentation of data in the listbox. As we now going to make every ListBox Item into two columns, one with the logo, and the other for the text.

ListBoxItemSample

Here we put the logo as data of Path, which is a Geometry instead of picture, of course, you can change it into an image.

ListBoxItemDesign

<DataTemplate x:Key="MetroListBoxItemTemplate">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="40"/>
            <ColumnDefinition Width="200"/>
        </Grid.ColumnDefinitions>
        <Path Data="{Binding Image}" Stretch="Uniform" Width="28" Height="28"
                    Fill="{Binding RelativeSource={RelativeSource AncestorType=ListBoxItem, Mode=FindAncestor}, Path=Foreground}" />
        <StackPanel Grid.Column="1" Margin="5">
            <TextBlock Text="{Binding Path=Title, FallbackValue=Title}" FontFamily="Segoe UI Light" FontSize="20"
                            Foreground="{Binding RelativeSource={RelativeSource AncestorType=ListBoxItem, Mode=FindAncestor}, Path=Foreground}" />
        </StackPanel>
    </Grid>
</DataTemplate>

ItemStyle – MetroListBoxItemStyle

After we have finished on how the data is presented in the ListBox, it is now the time really do for the design.

ItemStyle allows you to modify the default ControlTemplate to give the control a unique appearance. You can manage the style of the ListBox under different event / triggers. I will show you one by one.

Under the ItemStyle, it is divided into a few groups of code.

  • Default Style (Global Style) of the Control
  • Control Template under the FocusVisualStyle Style
  • Control Template under the Template Style

Default Style – Global Style

The main target is to set away the background and BorderBrush of the Item Generated in the ListBox. One thing you may find is the borderThickness has not been changed since it can leave some space between items.

<Setter Property="SnapsToDevicePixels" Value="True"/>
<Setter Property="Padding" Value="4,1"/>
<Setter Property="HorizontalContentAlignment" Value="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource FindAncestor, AncestorLevel=1, AncestorType={x:Type ItemsControl}}}"/>
<Setter Property="VerticalContentAlignment" Value="{Binding VerticalContentAlignment, RelativeSource={RelativeSource FindAncestor, AncestorLevel=1, AncestorType={x:Type ItemsControl}}}"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="BorderThickness" Value="1"/>

Focus Visual Style

We remain no change to this, since it affects only the focus of the item generated.

<Setter Property="FocusVisualStyle">
    <Setter.Value>
        <Style>
            <Setter Property="Control.Template">
                <Setter.Value>
                    <ControlTemplate>
                        <Rectangle Margin="2" SnapsToDevicePixels="True" Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" StrokeThickness="1" StrokeDashArray="1 2"/>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Setter.Value>
</Setter>

Template Style

Under the template style, it is also divided into a few items. Under Setter.Value, that means the template property is binded to a Control Template. Under Control Template, you will find a border with the content presenter inside and a set of triggers in ControlTemplate.Triggers.

Here, we only make changes to the Triggers.

By Default, there are four triggers.

  • IsMouseOver (True)
  • Selector.IsSelectionActive (False) & IsSelected (True)
  • Selector.IsSelectionActive (True) & IsSelected (True)
  • IsEnabled (False)

We will change to another four triggers.

  • IsMouseOver (True) & IsSelected (False)
  • IsMouseOver (False) & IsSelected (False)
  • IsSelected (True)
  • IsEnabled (False)
<ControlTemplate.Triggers>
    <MultiTrigger>
        <MultiTrigger.Conditions>
            <Condition Property="IsMouseOver" Value="True"/>
            <Condition Property="IsSelected" Value="False"/>
        </MultiTrigger.Conditions>
        <Setter Property="Background" TargetName="Bd" Value="#FFB9B9B9"/>
        <Setter Property="BorderBrush" TargetName="Bd" Value="{x:Null}"/>
        <Setter Property="Foreground" Value="Black" />
    </MultiTrigger>
    <MultiTrigger>
        <MultiTrigger.Conditions>
            <Condition Property="IsMouseOver" Value="False"/>
            <Condition Property="IsSelected" Value="False"/>
        </MultiTrigger.Conditions>
        <Setter Property="Background" TargetName="Bd" Value="{x:Null}"/>
        <Setter Property="BorderBrush" TargetName="Bd" Value="{x:Null}"/>
        <Setter Property="Foreground" Value="Black" />
    </MultiTrigger>
    <MultiTrigger>
        <MultiTrigger.Conditions>
            <Condition Property="IsSelected" Value="True"/>
        </MultiTrigger.Conditions>
        <Setter Property="Background" TargetName="Bd" Value="#FF0072C6"/>
        <Setter Property="BorderBrush" TargetName="Bd" Value="{x:Null}"/>
        <Setter Property="Foreground" Value="White"/>
    </MultiTrigger>
    <Trigger Property="IsEnabled" Value="False">
        <Setter Property="TextElement.Foreground" TargetName="Bd" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
    </Trigger>
</ControlTemplate.Triggers>

ListBox Data

We need to create our own classes for the data binding. Here we have three classes.

  • MetroMenuResources – it contains all the path data for the logo put on the left of the listbox and also the custom color (Blue)
  • MetroMenu – it is a class defition for containing the list of data stored in an observable collection with the generate function
  • MetroMenuItem – it is a class definition for each of the item to be shown.
class MetroMenuResources
{
    public static class Logo
    {
        public static Geometry Office
        { get { return Geometry.Parse("M119.9996,0L187.33301,20.667028 187.33301,206.66699 119.33293,226.66699 0,182.00028 120.667,197.77798 120.667,36.444982 40.222468,55.555956 40.222468,165.33381 0,181.99999 0,46.000032z"); } }

        public static Geometry User
        { get { return Geometry.Parse("M42.123207,35.952998C42.123207,35.952998,59.814095,40.166618,61.498001,57.012999L0,57.012999C-3.5527137E-15,57.012999,5.055995,38.480312,20.221399,36.794204L24.326918,54.381586 27.344988,54.356802 30.777908,45.354411 27.573,39.798999 33.978001,39.798999 30.907883,45.495424 34.821835,54.295404 37.174583,54.276085z M30.32205,0C39.69651,0 47.298,7.5988789 47.298,16.975199 47.298,26.351399 39.69651,33.953 30.32205,33.953 20.946487,33.953 13.347,26.351399 13.347,16.975199 13.347,7.5988789 20.946487,0 30.32205,0z"); } }

        public static Geometry Permission
        { get { return Geometry.Parse("M31.991545,14.657972C34.804115,14.657972,37.08786,16.853251,37.284561,19.616152L37.283264,19.616152 37.283264,24.825001 26.695858,24.825001 26.695858,19.633242C26.88331,16.861071,29.172413,14.657972,31.991545,14.657972z M31.991545,12.658C28.074802,12.658,24.891144,15.732177,24.684071,19.595402L24.675001,19.595402 24.675001,24.825001 22.749001,24.825001 22.749001,38.325001 41.249001,38.325001 41.249001,24.825001 39.325001,24.825001 39.325001,19.616152 39.301601,19.616152C39.104897,15.742677,35.914837,12.658,31.991545,12.658z M40.870499,0C48.744801,0 55.1283,6.3839736 55.1283,14.257674 55.1283,15.442464 54.967499,16.587053 54.695301,17.688543 60.123699,19.692427 64,24.874781 64,30.969727 64,38.800457 57.615898,45.148003 49.742298,45.148003 48.814499,45.148003 47.908298,45.052803 47.029301,44.883602L15.9219,44.883602C15.3744,44.947403 14.8211,44.989101 14.2572,44.989101 6.3828001,44.989101 0,38.606361 0,30.73263 0,25.433374 2.89853,20.817417 7.1901207,18.360437 7.0469398,17.648243 6.97014,16.912451 6.9701405,16.158558 6.97014,10.035111 11.9349,5.0688052 18.058701,5.0688057 21.895901,5.0688052 25.276699,7.0180082 27.268299,9.9816027 29.084,4.1964927 34.486401,0 40.870499,0z"); } }

        public static Geometry ActiveSync
        { get { return Geometry.Parse("M2.7499252,30.299848L18.669936,37.698865 14.349932,40.728464C17.789935,43.70807 22.169938,45.567823 26.799941,45.567823 35.689946,45.567823 43.469952,39.758592 45.309953,31.289716L45.599953,30.639802 53.339959,30.639802 52.979958,31.949628C50.759957,44.417974 39.749951,52.776868 26.799941,52.776868 19.539937,52.776868 12.809932,49.897249 7.8799284,44.937906L4.2499259,47.387582z M26.539532,0C33.809293,-6.8510417E-08,40.529256,2.7602325,45.459096,7.7205935L49.089028,5.050457 50.589001,21.701824 34.669381,15.291273 38.989247,12.360982C35.549249,9.3807617 31.16945,7.7306042 26.539532,7.7306042 17.649688,7.7306042 9.8698071,13.921167 8.0298765,22.401832L7.7398427,23.832002 0,23.832002 0.3599781,21.681804C2.5799068,9.2108264,13.589706,-6.8510417E-08,26.539532,0z"); } }

        public static Geometry Messaging
        { get { return Geometry.Parse("M27.047001,6.9600001L37.895041,6.9600001C39.645075,6.9600001,41.076,8.3916649,41.076,10.142372L41.076,21.279597C41.076,23.030263,39.645075,24.462018,37.895041,24.462018L31.530214,24.462018 31.530214,29.235 25.166888,24.462018 18.802063,24.462018C17.052028,24.462018,15.621,23.030263,15.621,21.279597L15.621,19.707338 16.441501,19.091977 22.274901,19.091977C24.906501,19.091977,27.047001,16.950768,27.047001,14.319159z M3.1822338,0L22.274957,0C24.024981,0,25.456,1.4316416,25.456,3.1823502L25.456,14.319225C25.456,16.069263,24.024981,17.501095,22.274957,17.501095L15.910269,17.501095 9.5468812,22.274 9.5468812,17.501095 3.1822338,17.501095C1.43221,17.501095,0,16.069263,0,14.319225L0,3.1823502C0,1.4316416,1.43221,0,3.1822338,0z"); } }

        public static Geometry MailboxOptions
        { get { return Geometry.Parse("M0,14.929908L0.031005826,14.929908 12.361023,27.011763 26.095032,40.483717 39.834045,27.011763 45.979019,20.989453 45.979019,23.011611 52.276001,26.608356 52.276001,49.235001 0,49.235001z M3.1059966,10.930001L26.136986,10.930001 43.336536,10.930001 45.979019,13.850875 45.979019,14.126189 37.648983,22.482984 26.136986,34.035965 14.624991,22.482984z M39.216011,3.9400587L60.432007,3.9400587 52.255009,13.442337 52.255009,24.715039 47.61401,22.064404 47.61401,13.222284z M38.375,0L38.886993,0 60.700012,0 61.216999,0 61.216999,1.6300001 60.710705,1.6300001 60.700012,1.6311073 38.886993,1.6311073 38.876461,1.6300001 38.375,1.6300001 38.375,1.1237106 38.373993,1.1139269 38.373993,0.51718044 38.375,0.5073967z"); } }

        public static Geometry Domain
        { get { return Geometry.Parse("F1M87.5156,1756.7617C87.5156,1757.3117,87.0656,1757.7617,86.5156,1757.7617L75.0586,1757.7617C74.5086,1757.7617,74.0586,1757.3117,74.0586,1756.7617L74.0586,1756.2247C74.0586,1755.6747,74.5086,1755.2247,75.0586,1755.2247L86.5156,1755.2247C87.0656,1755.2247,87.5156,1755.6747,87.5156,1756.2247z M87.5156,1761.7797C87.5156,1762.3287,87.0656,1762.7797,86.5156,1762.7797L75.0586,1762.7797C74.5086,1762.7797,74.0586,1762.3287,74.0586,1761.7797L74.0586,1761.2407C74.0586,1760.6917,74.5086,1760.2407,75.0586,1760.2407L86.5156,1760.2407C87.0656,1760.2407,87.5156,1760.6917,87.5156,1761.2407z M87.5156,1766.7977C87.5156,1767.3477,87.0656,1767.7977,86.5156,1767.7977L75.0586,1767.7977C74.5086,1767.7977,74.0586,1767.3477,74.0586,1766.7977L74.0586,1766.2597C74.0586,1765.7097,74.5086,1765.2597,75.0586,1765.2597L86.5156,1765.2597C87.0656,1765.2597,87.5156,1765.7097,87.5156,1766.2597z M80.7876,1779.7467C80.0646,1779.7467 79.4736,1779.1617 79.4736,1778.4357 79.4736,1777.7107 80.0646,1777.1247 80.7876,1777.1247 81.5136,1777.1247 82.1006,1777.7107 82.1006,1778.4357 82.1006,1779.1617 81.5136,1779.7467 80.7876,1779.7467 M71.6306,1751.2377C71.0806,1751.2377,70.6306,1751.6877,70.6306,1752.2377L70.6306,1782.7387C70.6306,1783.2877,71.0806,1783.7387,71.6306,1783.7387L89.9446,1783.7387C90.4946,1783.7387,90.9446,1783.2877,90.9446,1782.7387L90.9446,1752.2377C90.9446,1751.6877,90.4946,1751.2377,89.9446,1751.2377z"); } }

        public static Geometry Compliance
        { get { return Geometry.Parse("M9.6610071,18.877022L5.27902,22.511004 3.6530134,20.745008 1.8560175,22.543048 5.2440159,25.932034 10.968013,20.206005z M6.411008,15.993042C9.9540054,15.993042 12.824,18.864022 12.824,22.406024 12.824,25.948026 9.9540054,28.820043 6.411008,28.820043 2.8700244,28.820043 0,25.948026 0,22.406024 0,18.864022 2.8700244,15.993042 6.411008,15.993042z M28.308001,9.6409755C27.866001,9.6409755 27.176001,9.7899752 26.773001,9.969975 26.773001,9.969975 24.824001,10.841972 24.824001,12.312969 24.824001,13.792965 26.770001,14.661963 26.770001,14.661963 27.176001,14.843962 27.866001,14.989962 28.308001,14.989962L30.082001,14.989962C30.524,14.989962 31.218001,14.843962 31.620001,14.661963 31.620001,14.661963 33.560002,13.792965 33.560002,12.312969 33.560002,10.841972 31.620001,9.969975 31.620001,9.969975 31.218001,9.7899752 30.524,9.6409755 30.082001,9.6409755z M10.700002,7.8229799C10.259002,7.8229799 9.8970014,8.1589794 9.8970014,8.5699782 9.8970014,8.9799771 10.259002,9.3149767 10.700002,9.3149767L19.342001,9.3149767C19.782002,9.3149767 20.145001,8.9799771 20.145001,8.5699782 20.145001,8.1589794 19.782002,7.8229799 19.342001,7.8229799z M29.194,3.7499905C27.862002,3.7499905 26.779001,4.8269882 26.779001,6.1549845 26.779001,7.4879808 27.862002,8.5699782 29.194,8.5699782 30.523001,8.5699782 31.600001,7.4879808 31.600001,6.1549845 31.600001,4.8269882 30.523001,3.7499905 29.194,3.7499905z M6.9010016,0L36.558003,0C37,0,37.361,0.36099911,37.361,0.80399799L37.361,18.785952C37.361,19.227951,37,19.58895,36.558003,19.58895L15.270002,19.58895C14.766001,17.359956,13.398002,15.463961,11.536001,14.260964L19.342001,14.260964C19.782002,14.260964 20.145001,13.925965 20.145001,13.515966 20.145001,13.104967 19.782002,12.769968 19.342001,12.769968L10.700002,12.769968C10.287002,12.769968 9.9540016,13.069967 9.9130012,13.444966 8.9630014,13.085967 7.9380013,12.879967 6.863002,12.879967 6.6040017,12.879967 6.3500015,12.896967 6.0980021,12.918967L6.0980021,0.80399799C6.0980016,0.36099911,6.4590017,0,6.9010016,0z"); } }

        public static Geometry Migration
        { get { return Geometry.Parse("M45.963548,8.269645L62.665147,25.065546 45.963548,39.871244 45.963548,31.963644C45.963548,31.963644 17.120617,24.075571 9.909945,39.871244 9.9099454,35.922571 12.530199,16.167482 45.963548,16.167483z M0,0L41.778571,0 41.778571,4.1795139 41.778571,8.3590277 37.598714,8.3590277 37.598714,4.1795139 4.1798577,4.1795139 4.1798577,45.954649 37.598714,45.954649 37.598714,41.775137 41.778571,41.775137 41.778571,45.954649 41.778571,50.134165 37.598714,50.134165 0,50.134165 0,45.954649 0,4.1795139z"); } }

        public static Geometry Provision
        { get { return Geometry.Parse("M2.9405556,36.27997L19.353662,36.27997C19.613712,40.570866 21.184009,44.681723 23.964536,48.082432 24.764687,49.062635 25.654855,49.952822 26.595033,50.762989L2.9405556,50.762989C1.3202496,50.762989,0,49.442715,0,47.822376L0,39.220583C0,37.590244,1.3202496,36.27997,2.9405556,36.27997z M40.07915,26.039505C35.567814,26.037608 31.697568,29.460962 31.228801,34.03541 30.738794,38.924829 34.298976,43.284515 39.189158,43.784468 44.07922,44.27441 48.429468,40.724705 48.929485,35.825276 49.429502,30.945621 45.879332,26.576171 40.989147,26.086228 40.683511,26.054981 40.379906,26.039631 40.07915,26.039505z M40.001466,20.029883C40.506362,20.029675 41.016065,20.054951 41.529205,20.106826 49.749458,20.93658 55.729645,28.275957 54.89966,36.495132 54.609612,39.405008 53.489578,42.024628 51.809589,44.174322L61.82983,56.083324C63.099895,57.583179 62.899937,59.832962 61.399883,61.09285 59.889824,62.362747 57.649757,62.162815 56.379692,60.66296L46.229319,48.584051C43.899282,49.654016 41.249166,50.133951 38.509082,49.863956 30.298838,49.023951 24.308641,41.694582 25.148636,33.475406 25.936131,25.769929 32.428023,20.033003 40.001466,20.029883z M2.9403095,17.98002L28.162965,17.98002C23.482472,21.2416,20.202127,26.404101,19.462048,32.467039L2.9403095,32.467039C1.3201389,32.467039,0,31.146399,0,29.525614L0,20.921445C0,19.290654,1.3201389,17.980019,2.9403095,17.98002z M2.9399338,0L44.119007,0C45.73897,0,47.058941,1.3100014,47.058941,2.9400024L47.058941,11.550008C47.058941,13.170009,45.73897,14.490009,44.119007,14.490009L2.9399338,14.490009C1.3199692,14.490009,0,13.170009,0,11.550008L0,2.9400024C0,1.3100014,1.3199692,0,2.9399338,0z"); } }

        public static Geometry Settings
        { get { return Geometry.Parse("M18.660349,20.393C14.879011,20.393 11.806,23.468643 11.806,27.249899 11.806,31.026154 14.879011,34.103001 18.660349,34.103001 22.444386,34.103001 25.519998,31.026154 25.519998,27.249899 25.519998,23.468643 22.444386,20.393 18.660349,20.393z M50.07317,8.7561953C49.408178,8.7706149 48.735172,8.9156297 48.090648,9.2053407 45.51765,10.359123 44.36155,13.394207 45.51765,15.96858 46.671449,18.541552 49.709146,19.691384 52.283444,18.540251 54.856342,17.378819 56.012442,14.352736 54.856342,11.771862 53.990993,9.8450501 52.068145,8.7129386 50.07317,8.7561953z M15.597473,8.6000007L21.868224,8.6000007 22.20032,14.327933 22.20032,14.531032C23.236712,14.816134,24.218506,15.221134,25.133898,15.736836L25.253695,15.615635 29.675461,11.900828 34.111725,16.338337 30.296556,20.624846 30.165057,20.758946C30.683352,21.674349,31.08955,22.659951,31.378649,23.696451L31.544045,23.696451 37.293999,24.196451 37.293999,30.468565 31.566147,30.803267 31.378649,30.803267C31.08955,31.836972,30.683352,32.821373,30.165057,33.736874L30.280955,33.853974 33.993225,38.274582 29.558261,42.709496 25.271895,38.896988 25.133898,38.758988C24.218506,39.274586,23.236712,39.678185,22.20032,39.963387L22.20032,40.146988 21.868224,45.897 15.597473,45.897 15.093578,40.166485 15.093578,39.959488C14.064985,39.671688,13.084595,39.265385,12.174301,38.749787L12.040102,38.881485 7.7381763,42.709496 3.3033104,38.274582 6.9999428,33.869675 7.1522102,33.721176C6.6379356,32.807072,6.2343292,31.83057,5.9464817,30.803267L5.7499523,30.803267 0,30.468565 0,24.196451 5.7278118,23.696451 5.9464817,23.696451C6.2343292,22.665051,6.6379356,21.687248,7.1522102,20.775946L7.0128822,20.640444 3.1874237,16.338337 7.6209869,11.900828 12.027203,15.600036 12.174301,15.744536C13.084595,15.231535,14.064985,14.825334,15.093578,14.537533L15.093578,14.350033z M52.888157,0L57.259197,1.6601361 56.091211,5.7941664 56.035212,5.937414C56.665401,6.3971274,57.240894,6.9413698,57.753986,7.5533617L57.878984,7.4947021 61.949226,6.0845716 63.865797,10.35405 60.071657,12.331821 59.933659,12.393021C60.053354,13.18731,60.075457,13.977598,60.003952,14.758987L60.12245,14.803286 63.999998,16.682059 62.337223,21.053194 58.253977,19.771912 58.12108,19.721113C57.656389,20.352705,57.112095,20.928097,56.496105,21.441189L56.549604,21.556988 57.962284,25.627228 53.691446,27.541302 51.712375,23.744456 51.653774,23.615557C50.862186,23.736756,50.066597,23.760056,49.285309,23.687157L49.241009,23.800455 47.366036,27.678 42.991099,26.017823 44.277584,21.928082 44.325682,21.799183C43.696789,21.334391,43.121297,20.784899,42.607106,20.171606L42.487208,20.225006 38.469066,21.753483 36.553693,17.486847 40.297138,15.390477 40.441637,15.327978C40.321941,14.53499,40.299839,13.744601,40.372736,12.963413L40.24384,12.915114 36.321998,11.158738 37.984774,6.7851217 42.113513,7.9530752 42.263212,8.009104C42.728206,7.3840535,43.269797,6.8124616,43.879186,6.3033789L43.82189,6.1652506 42.29051,2.1496897 46.562749,0.22918414 48.656518,3.977782 48.722916,4.1289099C49.511906,4.0091622,50.299695,3.9843827,51.075585,4.0534113L51.127785,3.9218233z"); } }

        public static Geometry Impersonation
        { get { return Geometry.Parse("M35.296474,36.151999C35.296474,36.151999,50.11659,39.681278,51.529001,53.798998L0,53.798998C0,53.798998,4.2392921,38.271786,16.942831,36.859095L20.384258,51.594011 22.913481,51.572889 25.790185,44.031549 23.103999,39.375 28.471001,39.375 25.897191,44.146589 29.178051,51.520578 31.149942,51.50411z M47.350904,17.971639C45.871427,17.971639 44.667745,19.170275 44.667745,20.652821 44.667745,21.646953 45.209337,22.510879 46.011724,22.973194L46.011724,28.813174C46.011724,29.431694 46.610415,29.931009 47.350904,29.931009 48.092093,29.931009 48.690683,29.431694 48.690683,28.813174L48.690683,22.973194C49.493471,22.510879 50.035164,21.646953 50.035164,20.652821 50.035164,19.170275 48.833282,17.971639 47.350904,17.971639z M36.129765,13.525001L59.194824,13.525001C60.08061,13.525,60.798,14.249622,60.798,15.132451L60.798,31.326952C60.798,32.215679,60.08061,32.935001,59.194824,32.935001L36.129765,32.935001C35.241409,32.935001,34.521999,32.215679,34.522,31.326952L34.522,15.132451C34.521999,14.249622,35.241409,13.525,36.129765,13.525001z M25.409004,6.0289993C29.230525,6.0289993 32.690354,7.542696 35.246,9.9951291 32.914049,10.546679 31.168285,12.635216 31.168285,15.13266L31.168285,31.326944C31.168285,31.949955 31.296882,32.537867 31.491478,33.093975 29.646216,33.970192 27.586959,34.476 25.409004,34.476 17.553268,34.476 11.185999,28.106788 11.185999,20.25115 11.185999,12.395611 17.553268,6.0289993 25.409004,6.0289993z M47.919189,0C53.73023,0,58.441999,4.7095451,58.441999,10.521999L55.986267,10.521999C55.986267,6.0643916 52.372168,2.4543266 47.919189,2.4543266 43.466143,2.4543266 39.851312,6.0643916 39.851311,10.521999L37.395999,10.521999C37.395999,4.7095451,42.1032,0,47.919189,0z"); } }

        public static Geometry Reports
        { get { return Geometry.Parse("M22.1575,13.53399L21.794301,25.304994C21.794301,25.304994,21.3242,33.088695,12.747401,32.148692L5.3958107,31.949492 5.3958107,65.390895C5.3958107,66.135493,6.0026208,66.7391,6.7473808,66.7391L44.5313,66.7391C45.2734,66.7391,45.8802,66.135493,45.8802,65.390895L45.8802,14.883091C45.8802,14.140891,45.2734,13.53399,44.5313,13.53399z M21.804701,8.1369996L44.5313,8.1369996C48.257802,8.1370001,51.279999,11.15899,51.279999,14.883091L51.279999,65.390895C51.279999,69.117496,48.257802,72.136996,44.5313,72.136996L6.7473808,72.136996C3.0208105,72.136996,5.8073994E-07,69.117496,0,65.390895L0,31.142392 2.6718808,28.322993 2.6745006,28.246392 16.6771,13.53399 16.638001,13.53399 12.8945,17.483192 16.816401,13.328391 16.872401,13.328391 16.9961,13.19799 17.0078,13.19799z M30.352,0L55.255002,0 60.581002,0 60.581002,4.747 60.581002,55.207999 55.255002,55.207999 55.255002,4.747 30.352,4.747z"); } }

        public static Geometry About
        { get { return Geometry.Parse("F1M1355.27,1727.8L1346.08,1727.8C1346.06,1726.48 1346.05,1725.67 1346.05,1725.38 1346.05,1722.41 1346.54,1719.96 1347.52,1718.04 1348.51,1716.12 1350.47,1713.96 1353.43,1711.56 1356.38,1709.16 1358.14,1707.58 1358.72,1706.84 1359.61,1705.66 1360.05,1704.37 1360.05,1702.95 1360.05,1700.98 1359.27,1699.29 1357.7,1697.89 1356.12,1696.49 1354,1695.78 1351.34,1695.78 1348.77,1695.78 1346.62,1696.52 1344.89,1697.98 1343.16,1699.44 1341.98,1701.68 1341.33,1704.68L1332.04,1703.53C1332.3,1699.23 1334.13,1695.58 1337.53,1692.58 1340.93,1689.58 1345.38,1688.08 1350.91,1688.08 1356.72,1688.08 1361.34,1689.6 1364.77,1692.63 1368.21,1695.67 1369.92,1699.2 1369.92,1703.24 1369.92,1705.47 1369.29,1707.58 1368.03,1709.58 1366.77,1711.57 1364.08,1714.28 1359.95,1717.71 1357.81,1719.49 1356.48,1720.92 1355.97,1722 1355.45,1723.08 1355.22,1725.01 1355.27,1727.8z M1346.08,1741.41L1346.08,1731.29 1356.2,1731.29 1356.2,1741.41 1346.08,1741.41z"); } }

    }

    public static class CustomColor
    {
        public static SolidColorBrush Blue { get { return new SolidColorBrush(Color.FromArgb(0xff, 0x00, 0x72, 0xc6)); } }
    }
}
class MetroMenu
{
    private ObservableCollection<MetroMenuItem> _menu;

    public ObservableCollection<MetroMenuItem> Menu
    {
        get { return _menu; }
    }
    public  MetroMenu()
    {
        _menu = new ObservableCollection<MetroMenuItem>();
        _generate();
    }

    private void _generate()
    {
        _menu.Add(new MetroMenuItem("Office365", MetroMenuResources.Logo.Office));
        _menu.Add(new MetroMenuItem("Recipient", MetroMenuResources.Logo.User));
        _menu.Add(new MetroMenuItem("Provisioning", MetroMenuResources.Logo.Provision));
        _menu.Add(new MetroMenuItem("Migration", MetroMenuResources.Logo.Migration));
        _menu.Add(new MetroMenuItem("Permissions", MetroMenuResources.Logo.Permission));
        _menu.Add(new MetroMenuItem("Compliance", MetroMenuResources.Logo.Compliance));
        _menu.Add(new MetroMenuItem("Reporting", MetroMenuResources.Logo.Reports));
        _menu.Add(new MetroMenuItem("Domains", MetroMenuResources.Logo.Domain));
        _menu.Add(new MetroMenuItem("Mailbox Settings", MetroMenuResources.Logo.Settings));
        _menu.Add(new MetroMenuItem("Impersonation", MetroMenuResources.Logo.Impersonation));
        _menu.Add(new MetroMenuItem("Mailbox Options", MetroMenuResources.Logo.MailboxOptions));
        _menu.Add(new MetroMenuItem("Exchange ActiveSync", MetroMenuResources.Logo.ActiveSync));
        _menu.Add(new MetroMenuItem("Unified Messaging", MetroMenuResources.Logo.Messaging));
        _menu.Add(new MetroMenuItem("About", MetroMenuResources.Logo.About));
    }

}
class MetroMenuItem
{
    private Geometry _image;
    private string _title;
    public string Title
    {
        get { return _title; }
        set { _title = value; }
    }
    public Geometry Image
    {
        get { return _image; }
        set { _image = value; }
    }

    public MetroMenuItem(string title, Geometry image)
    {
        this._image = image;
        this._title = title;
    }
}

Finally, create the menu and bind to the ListBox in Loaded Event.

public MainWindow()
{
    InitializeComponent();
    this.Loaded += MainWindow_Loaded;
}

void MainWindow_Loaded(object sender, RoutedEventArgs e)
{
    MetroMenu menu = new MetroMenu();
    LbxMenu.DataContext = menu;
}

Summary

We are now be able to design our own ListBox and apply styles under different circumstances and conditions.

For the full project, please proceed here to download.

zipIconMetroListBox.zip

Advertisements

5 thoughts on “Metro ListBox in WPF

  1. It’s amazing, but I have a doubt: How can I design or find on the web those logos?
    I’m trying to find more logos, can you help me with that?

    Reply
  2. Download metro studio from syncfusion… It has a blasting library of Metro Logos and its Free! google it you will find it “Metro Studio”

    Reply
  3. I understood that you are rendering the images using pathgeomtry. I would like to know to generate the pathgeometry for a svg file. Thanks you

    Reply
  4. Hi,
    Could you tell us how you made the path data for the icons and say why/what is the reason for creating the icons this way instead of having them as a xaml resource.

    Thanks

    Reply

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s