How to Render a Path using Geometry
The following renders fine in visual studio with the [Has Geometry Here] filled in utilizing a rectangle to contain the resource. How can I modify this code to render using Noesis?
I am attempting to use a icon library that is formatted with the following objects as a static resource for each icon.
The icons would then be included as a rectangle in the application as follows.
This has no issue rendering in Visual Studio or WPF Applications. How can I get the included static resource to render in noesis/what do I need to change tom make them render.
Below is a full example without using static resources for testing purposes.
I am attempting to use a icon library that is formatted with the following objects as a static resource for each icon.
Code: Select all
<Canvas x:Key="IconGlobe" >
<Path Fill="#FFFFFFFF">
<Path.Data>
<Geometry>[Has Geometry Here]</Geometry>
</Path.Data>
</Path>
</Canvas>
Code: Select all
<Rectangle Style="{StaticResource MediumContent}" Margin="0,0,10,0">
<Rectangle.Fill>
<VisualBrush Visual="{StaticResource IconGlobe}"/>
</Rectangle.Fill>
</Rectangle>
Below is a full example without using static resources for testing purposes.
Code: Select all
<Rectangle Width="30" Height="30">
<Rectangle.Fill>
<VisualBrush >
<VisualBrush.Visual>
<Path Fill="#FFFFFFFF">
<Path.Data>
<Geometry>m 4.05467 1039.4287 c 0.85504 -5.7384 1.88225 -11.1531 2.28265 -12.0328 0.54267 -1.1922 1.75885 -1.9365 4.77732 -2.9237 2.22713 -0.7284 4.13425 -1.2335 4.23806 -1.1224 0.1038 0.111 0.3913 6.1218 0.63888 13.3572 l 0.45014 13.1552 -6.97085 0 -6.97087 0 1.55467 -10.4335 z m 15.041 4.8387 c -10e-4 -3.0771 -0.19899 -9.4478 -0.43918 -14.1571 l -0.4367 -8.5624 3.47351 -1.5788 3.47351 -1.5789 0 2.9403 c 0 1.6172 0.19783 5.8405 0.43962 9.3852 l 0.43961 6.4449 13.95533 0 13.95534 0 0.43958 -6.4449 c 0.24181 -3.5447 0.43958 -7.768 0.43958 -9.3852 l 0 -2.9403 3.47351 1.5789 3.4735 1.5788 -0.43668 8.5624 c -0.24013 4.7093 -0.4378 11.08 -0.43913 14.1571 l 0 5.5948 -20.90324 0 -20.90324 0 -0.002 -5.5948 z m 44.50886 -0.3024 c 0.001 -3.2434 0.19789 -9.3297 0.43646 -13.5251 l 0.43379 -7.628 4.02557 1.558 c 2.21418 0.857 4.4258 2.1121 4.91499 2.7893 0.48908 0.6772 1.60827 6.0624 2.48698 11.9671 l 1.59768 10.7359 -6.94913 0 -6.94913 0 0 -5.8972 z m -35.40059 -17.6432 c -0.5194 -8.9981 -0.2658 -10.4004 1.606 -8.881 4.54084 3.6862 15.84201 3.6862 20.38285 0 1.85967 -1.5096 2.10147 -0.1562 1.58341 8.8635 l -0.48462 8.4369 -11.30084 0 -11.3008 0 -0.486 -8.4194 z m 6.74019 -10.0376 c -1.1126 -0.538 -2.71869 -1.5629 -3.56911 -2.2776 -2.55317 -2.1456 -5.61295 -8.4193 -6.0069 -12.3164 l -0.35804 -3.54173 14.99129 0 14.99125 0 -0.3631 3.59233 c -0.46166 4.5664 -3.90384 10.7392 -7.3898 13.2518 -3.14233 2.2649 -9.00832 2.8811 -12.29559 1.2916 z m -9.65521 -20.89503 c -6.30901 -1.0015 -8.21938 -3.0098 -4.16789 -4.3815 1.45309 -0.492 2.02288 -1.0832 2.02288 -2.099 0 -3.0235 1.59149 -6.82519 3.84643 -9.18829 2.01913 -2.1159 5.32167 -4.2534 6.5717 -4.2534 0.20385 0 0.37064 2.008 0.37064 4.4623 0 4.90379 1.04348 6.69729 3.03434 5.21519 0.74244 -0.5527 1.01145 -2.02029 1.01145 -5.51759 l 0 -4.7647 2.0229 0 2.02289 0 0 4.7647 c 0 3.4973 0.26901 4.96489 1.01144 5.51759 1.99087 1.4821 3.03435 -0.3114 3.03435 -5.21519 0 -2.4543 0.16678 -4.4623 0.37063 -4.4623 1.00268 0 4.20775 1.8954 5.78959 3.4238 2.53013 2.4447 3.96671 5.2623 4.41532 8.65979 0.31773 2.406 0.66813 3.0087 1.91251 3.2888 1.563 0.3519 2.63492 1.8649 1.9872 2.805 -0.9067 1.3158 -6.30397 1.9326 -18.52104 2.1163 -7.23185 0.1088 -14.76274 -0.059 -16.73534 -0.3715 z</Geometry>
</Path.Data>
</Path>
</VisualBrush.Visual>
</VisualBrush>
</Rectangle.Fill>
</Rectangle>
-
sfernandez
Site Admin
- Posts: 2984
- Joined:
Re: How to Render a Path using Geometry
Hi,
Using VisualBrush.Visual with a new visual tree is not supported and it's a known issue. Right now VisualBrush can only be used if you reference a visual that is part of the UI logical tree that is being rendered. For example, the Reflections.xaml we provide in our SDK:
I can think of two options to accomplish what you want:
1) If the geometry can be combined into a single StreamGeometry (because only 1 brush is used to draw it), the best option is to share the icon geometries as resources, and then use them directly in a Path:
2) If the icon uses different paths and brushes, the best option is to use templates, and apply them to simple control elements:
Hope this helps
Using VisualBrush.Visual with a new visual tree is not supported and it's a known issue. Right now VisualBrush can only be used if you reference a visual that is part of the UI logical tree that is being rendered. For example, the Reflections.xaml we provide in our SDK:
Code: Select all
<Grid x:Name="Src" Margin="0,-60,0,0">
...
</Grid>
<Rectangle Height="100" Grid.Row="1">
<Rectangle.Fill>
<VisualBrush Visual="{Binding ElementName=Src}".../>
</Rectangle.Fill>
</Rectangle>
1) If the geometry can be combined into a single StreamGeometry (because only 1 brush is used to draw it), the best option is to share the icon geometries as resources, and then use them directly in a Path:
Code: Select all
<Grid>
<Grid.Resources>
<Geometry x:Key="IconGlobe">
m 4.05467 1039.4287 c 0.85504 -5.7384 1.88225 -11.1531 2.28265 -12.0328 0.54267 ...
</Geometry>
<Geometry x:Key="IconWorker">
...
</Geometry>
...
</Grid.Resources>
<StackPanel x:Name="IconBar" Orientation="Horizontal">
<Path Data="{StaticResource IconGlobe}" Fill="White" Width="30" Height="30" Margin="1"/>
<Path Data="{StaticResource IconWorker}" Fill="White" Width="30" Height="30" Margin="1"/>
...
</StackPanel>
...
</Grid>
Code: Select all
<Grid>
<Grid.Resources>
<ControlTemplate x:Key="IconGlobe" TargetType="Control">
<Viewbox>
<Canvas Width="64" Height="64">
<Path Data="m 4.05467 1039.4287 c 0.85504 -5.7384 1.88225 -11.1531 2.28265..." Fill="White" .../>
<Path Data="..." Fill="Silver" .../>
...
</Canvas>
</Viewbox>
</ControlTemplate>
<ControlTemplate x:Key="IconWorker" TargetType="Control">
...
</ControlTemplate>
...
</Grid.Resources>
<StackPanel x:Name="IconBar" Orientation="Horizontal">
<Control Template="{StaticResource IconGlobe}" Width="30" Height="30" Margin="1"/>
<Control Template="{StaticResource IconWorker}" Width="30" Height="30" Margin="1"/>
...
</StackPanel>
...
</Grid>
Re: How to Render a Path using Geometry
Is this planned to be resolved? I am for whatever reason unable to get my icons to render using the other methods given. Here is the exact code I am using.
When using the rectangle and visual brush I am getting my icon in visual studio and a xaml page.
When using the control template with a canvas I am not getting it to render in either case.
When using the rectangle and visual brush I am getting my icon in visual studio and a xaml page.
When using the control template with a canvas I am not getting it to render in either case.
Code: Select all
<Control Template="{StaticResource IconGlobeMedium}" Width="100" Height="100" Margin="1"/>
<Control Template="{StaticResource IconGlobeMedium2}" Width="100" Height="100" Margin="1"/>
<ControlTemplate x:Key="IconGlobeMedium2" TargetType="Control">
<Viewbox>
<Canvas Width="100" Height="100">
<Path Fill="#FFFFFFFF">
<Path.Data>
<Geometry>M 25.469551 1048.1991 C 23.81865 1045.1482 4.8623415 984.46004 5.2152417 983.35524 c 0.9440004 -2.95542 3.7378016 -2.02338 5.0245023 1.67619 l 0.931901 2.67947 3.900201 -0.48969 c 4.342702 -0.54531 8.791204 -2.75732 15.413507 -7.66429 5.912003 -4.38078 8.553304 -5.37073 11.360505 -4.25763 2.578701 1.02239 5.211102 5.60199 7.358703 12.80195 1.589101 5.32765 3.613002 7.76697 6.444403 7.76697 2.359101 0 9.837104 -3.08567 16.801507 -6.93284 3.334301 -1.84198 5.244702 -2.56462 5.033702 -1.90398 -0.6216 1.94627 -7.298303 14.59201 -10.231904 19.37971 -3.019902 4.9285 -6.037403 7.7177 -8.354604 7.7227 -0.751 0 -2.562201 -1.1983 -4.024802 -2.6664 -1.4626 -1.4681 -3.338301 -2.874 -4.168101 -3.1243 -1.941701 -0.5855 -5.330403 1.7923 -13.384206 9.3914 -6.809803 6.4253 -9.833804 8.5808 -12.037705 8.5808 -0.797601 0 -1.450101 0.3513 -1.450101 0.7807 0 0.4294 1.283001 4.7957 2.851101 9.7031 3.058102 9.5702 3.266602 10.7866 2.090801 12.1992 -1.1466 1.3776 -2.274801 1.1048 -3.305101 -0.7992 z m -1.330201 -27.9176 c 0.620801 -3.3952 -0.778 -13.575 -2.478401 -18.0374 -1.800001 -4.72349 -6.373003 -10.94288 -8.046103 -10.94288 -0.652501 0 -1.186401 0.17432 -1.186401 0.38733 0 1.82924 9.876504 30.82085 10.499705 30.82085 0.4421 0 0.9873 -1.0024 1.2112 -2.2279 z M 2.9500407 979.53962 c -0.9191004 -1.33055 -0.3527002 -3.90911 0.9951004 -4.53047 1.3602006 -0.62701 3.4147015 0.85636 3.4147015 2.46551 0 2.86328 -2.9153013 4.22843 -4.4098019 2.06496 z</Geometry>
</Path.Data>
</Path>
</Canvas>
</Viewbox>
</ControlTemplate>
<ControlTemplate x:Key="IconGlobeMedium" TargetType="Control">
<Rectangle >
<Rectangle.Fill>
<VisualBrush>
<VisualBrush.Visual>
<Path Fill="#FFFFFFFF">
<Path.Data>
<Geometry>M 25.469551 1048.1991 C 23.81865 1045.1482 4.8623415 984.46004 5.2152417 983.35524 c 0.9440004 -2.95542 3.7378016 -2.02338 5.0245023 1.67619 l 0.931901 2.67947 3.900201 -0.48969 c 4.342702 -0.54531 8.791204 -2.75732 15.413507 -7.66429 5.912003 -4.38078 8.553304 -5.37073 11.360505 -4.25763 2.578701 1.02239 5.211102 5.60199 7.358703 12.80195 1.589101 5.32765 3.613002 7.76697 6.444403 7.76697 2.359101 0 9.837104 -3.08567 16.801507 -6.93284 3.334301 -1.84198 5.244702 -2.56462 5.033702 -1.90398 -0.6216 1.94627 -7.298303 14.59201 -10.231904 19.37971 -3.019902 4.9285 -6.037403 7.7177 -8.354604 7.7227 -0.751 0 -2.562201 -1.1983 -4.024802 -2.6664 -1.4626 -1.4681 -3.338301 -2.874 -4.168101 -3.1243 -1.941701 -0.5855 -5.330403 1.7923 -13.384206 9.3914 -6.809803 6.4253 -9.833804 8.5808 -12.037705 8.5808 -0.797601 0 -1.450101 0.3513 -1.450101 0.7807 0 0.4294 1.283001 4.7957 2.851101 9.7031 3.058102 9.5702 3.266602 10.7866 2.090801 12.1992 -1.1466 1.3776 -2.274801 1.1048 -3.305101 -0.7992 z m -1.330201 -27.9176 c 0.620801 -3.3952 -0.778 -13.575 -2.478401 -18.0374 -1.800001 -4.72349 -6.373003 -10.94288 -8.046103 -10.94288 -0.652501 0 -1.186401 0.17432 -1.186401 0.38733 0 1.82924 9.876504 30.82085 10.499705 30.82085 0.4421 0 0.9873 -1.0024 1.2112 -2.2279 z M 2.9500407 979.53962 c -0.9191004 -1.33055 -0.3527002 -3.90911 0.9951004 -4.53047 1.3602006 -0.62701 3.4147015 0.85636 3.4147015 2.46551 0 2.86328 -2.9153013 4.22843 -4.4098019 2.06496 z</Geometry>
</Path.Data>
</Path>
</VisualBrush.Visual>
</VisualBrush>
</Rectangle.Fill>
</Rectangle>
</ControlTemplate>
-
sfernandez
Site Admin
- Posts: 2984
- Joined:
Re: How to Render a Path using Geometry
Hi,
ControlTemplate objects must be defined inside a ResourceDictionary (or inside the Resources property of an element). And if you are referencing to them as a StaticResource, then you have to define the templates before using them, just as I explained in my previous answer. The following renders perfectly in Blend/VS/Kaxaml:
In the previous post I used a Canvas of 100x100 just as an example, because usually when importing a vector geometry to Blend it comes wrapped on a Canvas. But in order to work correctly its size must be set accordingly to Path dimensions, and also set the correct Left and Top properties in the Path.
ControlTemplate objects must be defined inside a ResourceDictionary (or inside the Resources property of an element). And if you are referencing to them as a StaticResource, then you have to define the templates before using them, just as I explained in my previous answer. The following renders perfectly in Blend/VS/Kaxaml:
Code: Select all
<Grid
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Background="Black">
<Grid.Resources>
<ControlTemplate x:Key="IconGlobeMedium2" TargetType="Control">
<Viewbox>
<Canvas Height="78" Width="78">
<Path Canvas.Left="-1" Canvas.Top="-973" Fill="White"
Data="M 25.469551 1048.1991 C 23.81865 1045.1482 4.8623415 984.46004 5.2152417 983.35524 c 0.9440004 -2.95542 3.7378016 -2.02338 5.0245023 1.67619 l 0.931901 2.67947 3.900201 -0.48969 c 4.342702 -0.54531 8.791204 -2.75732 15.413507 -7.66429 5.912003 -4.38078 8.553304 -5.37073 11.360505 -4.25763 2.578701 1.02239 5.211102 5.60199 7.358703 12.80195 1.589101 5.32765 3.613002 7.76697 6.444403 7.76697 2.359101 0 9.837104 -3.08567 16.801507 -6.93284 3.334301 -1.84198 5.244702 -2.56462 5.033702 -1.90398 -0.6216 1.94627 -7.298303 14.59201 -10.231904 19.37971 -3.019902 4.9285 -6.037403 7.7177 -8.354604 7.7227 -0.751 0 -2.562201 -1.1983 -4.024802 -2.6664 -1.4626 -1.4681 -3.338301 -2.874 -4.168101 -3.1243 -1.941701 -0.5855 -5.330403 1.7923 -13.384206 9.3914 -6.809803 6.4253 -9.833804 8.5808 -12.037705 8.5808 -0.797601 0 -1.450101 0.3513 -1.450101 0.7807 0 0.4294 1.283001 4.7957 2.851101 9.7031 3.058102 9.5702 3.266602 10.7866 2.090801 12.1992 -1.1466 1.3776 -2.274801 1.1048 -3.305101 -0.7992 z m -1.330201 -27.9176 c 0.620801 -3.3952 -0.778 -13.575 -2.478401 -18.0374 -1.800001 -4.72349 -6.373003 -10.94288 -8.046103 -10.94288 -0.652501 0 -1.186401 0.17432 -1.186401 0.38733 0 1.82924 9.876504 30.82085 10.499705 30.82085 0.4421 0 0.9873 -1.0024 1.2112 -2.2279 z M 2.9500407 979.53962 c -0.9191004 -1.33055 -0.3527002 -3.90911 0.9951004 -4.53047 1.3602006 -0.62701 3.4147015 0.85636 3.4147015 2.46551 0 2.86328 -2.9153013 4.22843 -4.4098019 2.06496 z"/>
</Canvas>
</Viewbox>
</ControlTemplate>
<ControlTemplate x:Key="IconGlobeMedium" TargetType="Control">
<Viewbox>
<Canvas Height="78" Width="78">
<Path Canvas.Left="-1" Canvas.Top="-973" Fill="White"
Data="m 4.05467 1039.4287 c 0.85504 -5.7384 1.88225 -11.1531 2.28265 -12.0328 0.54267 -1.1922 1.75885 -1.9365 4.77732 -2.9237 2.22713 -0.7284 4.13425 -1.2335 4.23806 -1.1224 0.1038 0.111 0.3913 6.1218 0.63888 13.3572 l 0.45014 13.1552 -6.97085 0 -6.97087 0 1.55467 -10.4335 z m 15.041 4.8387 c -10e-4 -3.0771 -0.19899 -9.4478 -0.43918 -14.1571 l -0.4367 -8.5624 3.47351 -1.5788 3.47351 -1.5789 0 2.9403 c 0 1.6172 0.19783 5.8405 0.43962 9.3852 l 0.43961 6.4449 13.95533 0 13.95534 0 0.43958 -6.4449 c 0.24181 -3.5447 0.43958 -7.768 0.43958 -9.3852 l 0 -2.9403 3.47351 1.5789 3.4735 1.5788 -0.43668 8.5624 c -0.24013 4.7093 -0.4378 11.08 -0.43913 14.1571 l 0 5.5948 -20.90324 0 -20.90324 0 -0.002 -5.5948 z m 44.50886 -0.3024 c 0.001 -3.2434 0.19789 -9.3297 0.43646 -13.5251 l 0.43379 -7.628 4.02557 1.558 c 2.21418 0.857 4.4258 2.1121 4.91499 2.7893 0.48908 0.6772 1.60827 6.0624 2.48698 11.9671 l 1.59768 10.7359 -6.94913 0 -6.94913 0 0 -5.8972 z m -35.40059 -17.6432 c -0.5194 -8.9981 -0.2658 -10.4004 1.606 -8.881 4.54084 3.6862 15.84201 3.6862 20.38285 0 1.85967 -1.5096 2.10147 -0.1562 1.58341 8.8635 l -0.48462 8.4369 -11.30084 0 -11.3008 0 -0.486 -8.4194 z m 6.74019 -10.0376 c -1.1126 -0.538 -2.71869 -1.5629 -3.56911 -2.2776 -2.55317 -2.1456 -5.61295 -8.4193 -6.0069 -12.3164 l -0.35804 -3.54173 14.99129 0 14.99125 0 -0.3631 3.59233 c -0.46166 4.5664 -3.90384 10.7392 -7.3898 13.2518 -3.14233 2.2649 -9.00832 2.8811 -12.29559 1.2916 z m -9.65521 -20.89503 c -6.30901 -1.0015 -8.21938 -3.0098 -4.16789 -4.3815 1.45309 -0.492 2.02288 -1.0832 2.02288 -2.099 0 -3.0235 1.59149 -6.82519 3.84643 -9.18829 2.01913 -2.1159 5.32167 -4.2534 6.5717 -4.2534 0.20385 0 0.37064 2.008 0.37064 4.4623 0 4.90379 1.04348 6.69729 3.03434 5.21519 0.74244 -0.5527 1.01145 -2.02029 1.01145 -5.51759 l 0 -4.7647 2.0229 0 2.02289 0 0 4.7647 c 0 3.4973 0.26901 4.96489 1.01144 5.51759 1.99087 1.4821 3.03435 -0.3114 3.03435 -5.21519 0 -2.4543 0.16678 -4.4623 0.37063 -4.4623 1.00268 0 4.20775 1.8954 5.78959 3.4238 2.53013 2.4447 3.96671 5.2623 4.41532 8.65979 0.31773 2.406 0.66813 3.0087 1.91251 3.2888 1.563 0.3519 2.63492 1.8649 1.9872 2.805 -0.9067 1.3158 -6.30397 1.9326 -18.52104 2.1163 -7.23185 0.1088 -14.76274 -0.059 -16.73534 -0.3715 z"/>
</Canvas>
</Viewbox>
</ControlTemplate>
</Grid.Resources>
<StackPanel Orientation="Horizontal">
<Control Template="{StaticResource IconGlobeMedium}" Width="100" Height="100" Margin="1"/>
<Control Template="{StaticResource IconGlobeMedium2}" Width="100" Height="100" Margin="1"/>
</StackPanel>
</Grid>
Who is online
Users browsing this forum: No registered users and 65 guests