Forums | NoesisGUI

Welcome to our official discussion site. You’ll find topics on features, bugs, development, and general support here
https://www.noesisengine.com/forums/

XAML Tutorial and Geometry Path Question

https://www.noesisengine.com/forums/viewtopic.php?t=2944

Page 1 of 1

XAML Tutorial and Geometry Path Question

Posted: 22 May 2023, 21:04
by stonstad
Could you describe what your workflow was to create the geometry paths for this UI?

https://github.com/Noesis/Tutorials/tre ... groundBlur

I'm working with the UI in Blend and I see the following paths, but I'm at a loss for how they were created:
Code: Select all
  <Geometry x:Key="BackgroundBlur.Geometry.Top">M264.7,42.7 269.1,41.1 269.1,12 261.2,4 215.2,4 211.3,0.1 57.8,-0.1 53.9,3.9 7.9,3.9 0,11.9 0,41.1 4.4,42.7z</Geometry>
  <Geometry x:Key="BackgroundBlur.Geometry.Bottom">M4.4 0v96.9L0 98.4v32.9c3.3 3.3 5.2 5.2 8.6 8.5h53.5l1.1-3h142.7l1.1 3h53.5c3.3-3.3 5.2-5.2 8.6-8.5V98.4 l-4.4-1.6V0H4.4z</Geometry>
  <Geometry x:Key="BackgroundBlur.Geometry.Decor.Top">M261.2 3.9h-46L211.3 0h-71h-11.5h-71l-3.9 3.9h-46l-7.9 8h0.4l8.3-6.5h46.2l2.6-2.7h71.3h11.5h71.3l2.6 2.7h46.2l8.3 6.5 h0.4L261.2 3.9z M58.1 1.8L59 1h151.1l0.8 0.8H58.1z</Geometry>
  <Geometry x:Key="BackgroundBlur.Geometry.Decor.Bottom">M8.3 25.1l-6.5-6.5v-17L0 0v21.2l5.8 5.6h34l-2.2-1.8H8.3z M6.3 26.1l-5.7-5.7l0.5-0.6l5.7 5.7L6.3 26.1z</Geometry>
  <Geometry x:Key="BackgroundBlur.Geometry.Detail.Center">M99.2 0l-3 3l3 3l3-3L99.2 0z M97.1 3l2.1-2.1l2.1 2.1l-2.1 2.1L97.1 3z</Geometry>
  <Geometry x:Key="BackgroundBlur.Geometry.Detail.Left">M96.2 0.6l-0.4-0.4l-2.5 2.5C41.8 2.7 0 2.8 0 3s41.8 0.3 93.3 0.3l2.5 2.5l0.4-0.4L93.9 3L96.2 0.6z</Geometry>
Separately, should the buttons appear styled? The associated Resource.xaml is loading, but I'm not seeing the style applied:

Image

Thank you!


Shaun

Re: XAML Tutorial and Geometry Path Question

Posted: 23 May 2023, 14:03
by stonstad
Just a brief follow-up question here. Since these paths have fixed dimensions, if I am wanting to have a UI like this grow in size (but not change scale), are my options the following:

1) 9-slice the paths shown above and create 9 separate paths.
2) Modify the path geometry dynamically on resize to increase/decrease the longest dimension horizontally or vertically

Thank you!

Re: XAML Tutorial and Geometry Path Question

Posted: 23 May 2023, 14:17
by DevFear
I'm not sure if it will help in this case, but when I need to draw some complex icon with subsequent possible resizing, I use this approach:
Code: Select all
<Viewbox Stretch="Fill" HorizontalAlignment="Left" Height="125.96" VerticalAlignment="Top" Width="127">
        <Grid>
            <Path Fill="#ff221e1f" Data="F1 M 65.778,45.310 L 85.092,45.310 L 85.092,47.630 L 68.504,47.630 L 68.504,63.174 L 83.700,63.174 L 83.700,65.494 L 68.504,65.494 L 68.504,84.402 L 65.778,84.402 L 65.778,45.310 Z"/>
            <Path Fill="#ff221e1f" Data="F1 M 95.300,64.218 L 101.505,64.218 C 107.538,64.218 111.482,60.854 111.482,55.692 C 111.482,49.718 107.074,47.282 100.926,47.282 C 98.257,47.282 96.286,47.572 95.300,47.804 L 95.300,64.218 Z M 92.574,45.832 C 94.952,45.310 98.316,45.020 100.984,45.020 C 106.087,45.020 109.278,46.122 111.540,48.268 C 113.222,49.892 114.266,52.502 114.266,55.228 C 114.266,60.506 111.133,63.870 106.610,65.436 L 106.610,65.552 C 109.742,66.538 111.713,69.496 112.642,73.846 C 113.976,79.936 114.730,82.836 115.542,84.402 L 112.642,84.402 C 112.062,83.242 111.192,79.820 110.148,74.890 C 108.988,69.264 106.551,66.712 101.390,66.480 L 95.300,66.480 L 95.300,84.402 L 92.574,84.402 L 92.574,45.832 Z"/>
            <Path StrokeThickness="3.0" Stroke="#ff221e1f" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeLineJoin="Round" Data="F1 M 179.125,90.312 C 179.125,139.362 139.362,179.125 90.312,179.125 C 41.263,179.125 1.500,139.362 1.500,90.312 C 1.500,41.263 41.263,1.500 90.312,1.500 C 139.362,1.500 179.125,41.263 179.125,90.312 Z"/>
            <Path StrokeThickness="3.0" Stroke="#ff221e1f" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeLineJoin="Round" Data="F1 M 75.533,117.798 L 103.986,117.798"/>
        </Grid>
    </Viewbox>
(Source: https://stackoverflow.com/questions/792 ... tch-unifor)
Viewbox helps me.

Re: XAML Tutorial and Geometry Path Question

Posted: 23 May 2023, 14:19
by stonstad
Thanks, DevFear! I would use a ViewBox but for this scenario, I do not want the elements to scale-up in size. This would result in a larger UI when content increases. For this reason, I am trying #1 and #2 above. But maybe there is a better way?

Re: XAML Tutorial and Geometry Path Question

Posted: 23 May 2023, 14:47
by stonstad
Here is an example of how to stretch a path-based UI without scaling up/down line width:
Code: Select all
            float originalHeight = 139.6f; // the original maximum Y value
            float height = 250f; // replace with actual value

            StreamGeometry bottomGeometry = new StreamGeometry();
            using (StreamGeometryContext context = bottomGeometry.Open())
            {
                context.BeginFigure(new Point(4.4f, 0), true, false);
                context.LineTo(new Point(4.4f, (96.9f/originalHeight) * height), true , false);
                context.LineTo(new Point(0f, (98.4f/originalHeight) * height), true, false);
                context.LineTo(new Point(0f, (131.3f / originalHeight) * height), true, false);
                context.LineTo(new Point(8.6f, (139.6f / originalHeight) * height), true, false);
                context.LineTo(new Point(62.1f, (139.6f / originalHeight) * height), true, false);
                context.LineTo(new Point(63.2f, (136.6f / originalHeight) * height), true, false);
                context.LineTo(new Point(205.9f, (136.6f / originalHeight) * height), true, false);
                context.LineTo(new Point(207f, (139.6f / originalHeight) * height), true, false);
                context.LineTo(new Point(260.5f, (139.6f / originalHeight) * height), true, false);
                context.LineTo(new Point(269.1f, (131.3f / originalHeight) * height), true, false);
                context.LineTo(new Point(269.1f, (98.4f / originalHeight) * height), true, false);
                context.LineTo(new Point(264.7f, (96.8f / originalHeight) * height), true, false);
                context.LineTo(new Point(264.7f, 0f), true, false);
                context.LineTo(new Point(4.4f, 0f), true, false);
            }
            _BottomPanelBlur.Data = bottomGeometry;
            _BottomPanelColor.Data = bottomGeometry;

Re: XAML Tutorial and Geometry Path Question

Posted: 24 May 2023, 13:15
by sfernandez
Could you describe what your workflow was to create the geometry paths for this UI?
The paths were designed in Illustrator/InkScape, then exported to XAML and then moved the path data to Geometries in a dictionary.
Since these paths have fixed dimensions, if I am wanting to have a UI like this grow in size (but not change scale), are my options...
1. This could work if you have simple/solid backgrounds for your paths, otherwise it will be very hard (if not impossible) to adjust the background to seamlessly join the different slices.
2. Generating the geometry dynamically will solve previous issue as you get a single geometry with a uniform background. But it depends on the complexity of the geometry you need to generate.
Here is an example of how to stretch a path-based UI without scaling up/down line width
Thanks for sharing :)
All times are UTC+01:00
Page 1 of 1
Powered by phpBB® Forum Software © phpBB Limited
https://www.phpbb.com/