WinUI: How can I do this for the icon of a MenuFlyoutItem in CodeBehind?

Question

WinUI: How can I do this for the icon of a MenuFlyoutItem in CodeBehind?

Andreas Mazatis 131

I also want to give a MenuIFlyouttem Icon the following data in code behind

<ControlTemplate x:Key="SymbolAddUser">  
    <Viewbox>  
        <Grid>  
            <Path Stroke="#037AD5" Fill="#037AD5" Data="M21.46,16.59c-0.98-0.78-2.05-1.4-3.22-1.85c0.58-0.36,1.1-0.79,1.57-1.29c0.46-0.49,0.85-1.03,1.18-1.61  
    s0.57-1.2,0.74-1.85c0.17-0.65,0.26-1.32,0.26-2.01c0-1.1-0.21-2.14-0.62-3.11c-0.42-0.97-0.98-1.82-1.71-2.54  
    c-0.72-0.72-1.57-1.29-2.54-1.71C16.14,0.21,15.11,0,14,0c-1.1,0-2.14,0.21-3.11,0.62C9.92,1.04,9.08,1.61,8.35,2.33  
    S7.06,3.9,6.65,4.87C6.23,5.84,6.02,6.88,6.02,7.98c0,1.41,0.33,2.7,0.99,3.87c0.66,1.16,1.58,2.13,2.75,2.9  
    c-1.16,0.44-2.22,1.03-3.17,1.79c-0.95,0.76-1.76,1.63-2.44,2.6s-1.2,2.04-1.57,3.2s-0.55,2.35-0.55,3.6h2  
    c0-0.91,0.12-1.8,0.36-2.65c0.24-0.85,0.57-1.65,1.01-2.38c0.43-0.74,0.95-1.41,1.56-2.02c0.61-0.61,1.28-1.13,2.02-1.56  
    c0.74-0.43,1.53-0.77,2.38-1c0.85-0.24,1.74-0.36,2.65-0.36c1.18,0,2.31,0.2,3.39,0.59c1.08,0.4,2.05,0.95,2.92,1.65  
    c0.87,0.71,1.6,1.55,2.21,2.53c0.6,0.98,1.02,2.05,1.26,3.21h0.2v-4.61C23.28,18.29,22.45,17.38,21.46,16.59z M16.33,13.5  
    c-0.73,0.31-1.5,0.47-2.32,0.47c-0.83,0-1.61-0.16-2.33-0.47c-0.72-0.31-1.36-0.74-1.9-1.29s-0.97-1.18-1.29-1.9  
    c-0.31-0.72-0.47-1.5-0.47-2.33c0-0.82,0.16-1.59,0.47-2.32C8.8,4.93,9.23,4.29,9.77,3.75c0.55-0.55,1.18-0.97,1.9-1.29  
    C12.4,2.15,13.17,2,14,2c0.82,0,1.59,0.16,2.32,0.47s1.36,0.74,1.91,1.29c0.55,0.55,0.97,1.18,1.29,1.91  
    c0.31,0.73,0.47,1.5,0.47,2.32c0,0.83-0.16,1.61-0.47,2.33s-0.74,1.36-1.29,1.9C17.69,12.76,17.05,13.19,16.33,13.5z"/>  
            <Polygon Fill="#AF0566" Points="28.01,26.01 32,26.01 32,28.01 28.01,28.01 28.01,32 26.01,32 26.01,28.01 22.02,28.01 22.02,26.01,26.01,26.01 26.01,22.02 28.01,22.02"/>  
        </Grid>  
    </Viewbox>  
</ControlTemplate>

Accepted answer

1 additional answer

Your answer

Answer 1

Hello,

Welcome to Microsoft Q&A!

You could create the Path Object and the Polygon Object in the code behind. The data property of the Path Object is a Geometry Object, so you need to use XamlReader class to parse data sting into a Geometry object. The Polygon.Points Property of the Polygon Object is a PointCollection, what you need is to add the points into that PointCollection.

The code looks like this:

 var data = "M21.46,16.59c-0.98-0.78-2.05-1.4-3.22-1.85c0.58-0.36,1.1-0.79,1.57-1.29c0.46-0.49,0.85-1.03,1.18-1.61 s0.57-1.2,0.74-1.85c0.17-0.65,0.26-1.32,0.26-2.01c0-1.1-0.21-2.14-0.62-3.11c-0.42-0.97-0.98-1.82-1.71-2.54 c-0.72-0.72-1.57-1.29-2.54-1.71C16.14,0.21,15.11,0,14,0c-1.1,0-2.14,0.21-3.11,0.62C9.92,1.04,9.08,1.61,8.35,2.33 S7.06,3.9,6.65,4.87C6.23,5.84,6.02,6.88,6.02,7.98c0,1.41,0.33,2.7,0.99,3.87c0.66,1.16,1.58,2.13,2.75,2.9 c-1.16,0.44-2.22,1.03-3.17,1.79c-0.95,0.76-1.76,1.63-2.44,2.6s-1.2,2.04-1.57,3.2s-0.55,2.35-0.55,3.6h2 c0-0.91,0.12-1.8,0.36-2.65c0.24-0.85,0.57-1.65,1.01-2.38c0.43-0.74,0.95-1.41,1.56-2.02c0.61-0.61,1.28-1.13,2.02-1.56 c0.74-0.43,1.53-0.77,2.38-1c0.85-0.24,1.74-0.36,2.65-0.36c1.18,0,2.31,0.2,3.39,0.59c1.08,0.4,2.05,0.95,2.92,1.65 c0.87,0.71,1.6,1.55,2.21,2.53c0.6,0.98,1.02,2.05,1.26,3.21h0.2v-4.61C23.28,18.29,22.45,17.38,21.46,16.59z M16.33,13.5 c-0.73,0.31-1.5,0.47-2.32,0.47c-0.83,0-1.61-0.16-2.33-0.47c-0.72-0.31-1.36-0.74-1.9-1.29s-0.97-1.18-1.29-1.9 c-0.31-0.72-0.47-1.5-0.47-2.33c0-0.82,0.16-1.59,0.47-2.32C8.8,4.93,9.23,4.29,9.77,3.75c0.55-0.55,1.18-0.97,1.9-1.29 C12.4,2.15,13.17,2,14,2c0.82,0,1.59,0.16,2.32,0.47s1.36,0.74,1.91,1.29c0.55,0.55,0.97,1.18,1.29,1.91 c0.31,0.73,0.47,1.5,0.47,2.32c0,0.83-0.16,1.61-0.47,2.33s-0.74,1.36-1.29,1.9C17.69,12.76,17.05,13.19,16.33,13.5z";  
  
            Microsoft.UI.Xaml.Shapes.Path path = new Microsoft.UI.Xaml.Shapes.Path();  
  
            var geometry = (Geometry)XamlReader.Load("<Geometry xmlns='http://schemas.microsoft.com/winfx/2006/xaml/presentation'>"+ data + "</Geometry>");  
            path.Fill = new SolidColorBrush(Colors.Red);  
            path.Data = geometry;  
  
  
            var polygon1 = new Microsoft.UI.Xaml.Shapes.Polygon();  
            polygon1.Fill = new SolidColorBrush(Colors.LightBlue);  
  
            var points = new PointCollection();  
            points.Add(new Point(28.01, 26.01));  
            points.Add(new Point(32, 26.01));  
            points.Add(new Point(32, 28.01));  
            points.Add(new Point(28.01, 28.01));  
  
            points.Add(new Point(28.01, 32));  
            points.Add(new Point(26.01, 32));  
            points.Add(new Point(26.01, 28.01));  
            points.Add(new Point(22.02, 28.01));  
            points.Add(new Point(22.02, 26.01));  
            points.Add(new Point(26.01, 26.01));  
            points.Add(new Point(26.01, 22.02));  
            points.Add(new Point(28.01, 22.02));  
  
            polygon1.Points = points;  
  
            
            MyGrid.Children.Add(path);  
            MyGrid.Children.Add(polygon1);

The result looks like this:

Thank you.

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Andreas Mazatis 131 Reputation points

2022-05-09T10:39:02.293+00:00

And how do I get the grid as an icon in a MenuIFlyouttem?
Anonymous

2022-05-10T01:19:11.157+00:00

What do you mean by the grid as an icon? Could you please be more specific about our question?
Andreas Mazatis 131 Reputation points

2022-05-10T07:39:44.777+00:00

In the solution above, the image was created as a polygon and added to "MyGrid". However, I would like to create a MenuFlyoutItem with the created image. Therefore my question is how to assign the grid with the polygon to the MenuFlyoutItems Icon.

menuItem = new MenuFlyoutItem(); menuItem.Text = "MenuItem 1"; menuItem.Icon = **<<<<<<<<** menuItem.Click += new RoutedEventHandler(MenuItem_Clicked); flyout.Items.Add(menuItem);
Anonymous

2022-05-10T08:42:29.837+00:00

Could you please tell me if your app is a UWP application or a winui3 application?
Andreas Mazatis 131 Reputation points

2022-05-10T12:37:25.74+00:00

It is a winui3 application
Anonymous

2022-05-11T02:38:17.69+00:00

The MenuFlyoutItem.Icon Property requires a IconElement Class as value. So you could only assign BitmapIcon, FontIcon, PathIcon, SymbolIcon to the MenuFlyoutItem.Icon Property. None of these icon types could directly use the source from the XAML controls even if the XAML controls are converted to bitmapimage.

The PathIocn could load Path data but just only path data, it can't load the polygon data. The BitmapIcon could only load an image file from the app package.

My suggestion is that you could use the FontIcon and use the existing Segoe MDL2 Assets icons called AddFriend. Like this:

var fontIcon = new FontIcon(); fontIcon.FontFamily = new FontFamily("Segoe MDL2 Assets"); fontIcon.Glyph = "\xE8FA"; var newMenuItem = new MenuFlyoutItem(); newMenuItem.Text = "123"; newMenuItem.Icon = fontIcon;
Andreas Mazatis 131 Reputation points

2022-05-11T05:22:41.72+00:00

The problem is that I need two or three colour icons.
Anonymous

2022-05-11T06:37:45.86+00:00

It will be a little complicated if you insist on using your own path to draw the icon, you have to use RenderTargetBitmap Class to create an image source based on the Grid, then you need to save the RenderTargetBitmap object as a local file in your app package. Then you could use BitmapIcon to get the local file and use it in the `MenuFlyoutItem.Icon property.

This might cost a lot of performance and it is not recommended. We recommend you to create such an image out of the app, for example using PS, Then putting the image file into your app resources, After that your app could just use the local file.

Answer 2

Andreas Mazatis 131

ok, thank you for this information

Share via

WinUI: How can I do this for the icon of a MenuFlyoutItem in CodeBehind?

1 additional answer

Your answer