question

AndreasMazatis-6476 avatar image
0 Votes"
AndreasMazatis-6476 asked AndreasMazatis-6476 answered

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

199973-image.png




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>
dotnet-csharpwindows-app-sdk
image.png (7.5 KiB)
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

RoyLi-MSFT avatar image
0 Votes"
RoyLi-MSFT answered RoyLi-MSFT commented

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:
200038-image.png


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.



image.png (17.1 KiB)
· 8
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

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

0 Votes 0 ·
RoyLi-MSFT avatar image RoyLi-MSFT AndreasMazatis-6476 ·

What do you mean by the grid as an icon? Could you please be more specific about our question?

0 Votes 0 ·

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

0 Votes 0 ·
RoyLi-MSFT avatar image RoyLi-MSFT AndreasMazatis-6476 ·

Could you please tell me if your app is a UWP application or a winui3 application?

0 Votes 0 ·

It is a winui3 application

0 Votes 0 ·
RoyLi-MSFT avatar image RoyLi-MSFT AndreasMazatis-6476 ·

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;


0 Votes 0 ·

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

0 Votes 0 ·
RoyLi-MSFT avatar image RoyLi-MSFT AndreasMazatis-6476 ·

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.


0 Votes 0 ·
AndreasMazatis-6476 avatar image
0 Votes"
AndreasMazatis-6476 answered

ok, thank you for this information

5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.