Programmatically Removing, Cloning, and Adding Elements
I may be missing something simple, but I am confused on how to do the following:
In my game we are displaying a combo value using images rather than a font because the style of the digits has more than what true type supports. So if your combo is 123 I want to draw the images 1, 2, and 3 in a container that resizes to its children. In the xaml the container exists along with the canvases for each digit 0-9. They are vectored. When the xaml is loaded I remove them from their parent then as the combo changes I want to clone one of the 10 original canvases, and add it to the container, removing and deleting the cloned canvas that was in its place.
My first question is is this the best method for achieving what I want, given the workings of Noesis? I assume it should be fine if there isn't a lot of overhead with cloning. I could also pool the digits if frequent allocations end up fragmenting memory.
Secondly, how do you programmatically clone elements? I've read suggestions from WPF developers to serialize to a stream and then load back from the stream but this seems pretty roundabout and inefficient. Canvas has no copy constructor and the Clone method is related to Templates.
In my game we are displaying a combo value using images rather than a font because the style of the digits has more than what true type supports. So if your combo is 123 I want to draw the images 1, 2, and 3 in a container that resizes to its children. In the xaml the container exists along with the canvases for each digit 0-9. They are vectored. When the xaml is loaded I remove them from their parent then as the combo changes I want to clone one of the 10 original canvases, and add it to the container, removing and deleting the cloned canvas that was in its place.
My first question is is this the best method for achieving what I want, given the workings of Noesis? I assume it should be fine if there isn't a lot of overhead with cloning. I could also pool the digits if frequent allocations end up fragmenting memory.
Secondly, how do you programmatically clone elements? I've read suggestions from WPF developers to serialize to a stream and then load back from the stream but this seems pretty roundabout and inefficient. Canvas has no copy constructor and the Clone method is related to Templates.
-
-
sfernandez
Site Admin
- Posts: 3197
- Joined:
Re: Programmatically Removing, Cloning, and Adding Elements
If I understood correctly, you need a mechanism to clone some numbers that are defined as a complex group of vectors (you first talked about images, but then say "they are vectored"). I think the best solution right now is to use templates, like in the following example:
This example is optimized as it will use the same vector data for all instantiations of the template, and if you organize your brush resources correctly, they will be shared too.
If you are using images instead of vector geometry, the mechanism is still valid. Just define in your template all the ImageBrush resources you need to share them across all template instances.
The result can be something like this:
Code: Select all
<Grid
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"
d:DesignWidth="800" d:DesignHeight="480">
<Grid.Resources>
<ControlTemplate x:Key="Number1Template" TargetType="Control">
<ControlTemplate.Resources>
<Geometry x:Key="Number1">
M22.324218,2.0679516E-24 L25.734375,1.933594 C25.57031,6.714844 25.324216,15.210938 24.996093,27.421875 24.878904,33.515625 24.761716,43.089844 24.644531,56.144532 L8.9999999,56.144532 C9.0468749,48.902344 8.9765624,42.164063 8.7890624,35.929688 8.7421874,34.101563 8.6249999,29.15625 8.4374999,21.09375 8.0390624,21.164063 7.1718744,21.351563 5.8359374,21.65625 5.1328124,21.820313 4.3007812,22.089844 3.3398439,22.464844 L4.1723252E-09,10.652344 C2.6484372,9.527344 7.3359374,7.40625 14.0625,4.289063 16.148437,3.281254 18.902343,1.851567 22.324218,2.0679516E-24 z
</Geometry>
<Geometry x:Key="Number1Bd">
M-0.0037543403,11.026497 C0.22271872,10.541766 0.38169715,9.2663081 0.49745009,8.6875434 2.2631184,8.6875434 3.5633183,9.1751052 4.6741536,11.026497 4.6741536,10.125441 3.6566247,7.3285714 5.1753581,7.1839301 5.945384,7.1105943 6.2765787,8.0149058 6.8460395,7.8522027 7.6637046,7.6185841 7.6273813,6.6112336 8.3496528,6.3485894 10.064639,5.7249581 10.384436,7.46068 12.19222,6.0144531 14.066762,4.5148194 13.300739,5.5045404 15.700651,5.847385 15.700651,4.7832936 15.432004,3.6316636 15.867719,2.6730903 16.570821,1.126267 16.023475,1.7728838 18.039605,2.5060221 18.938031,2.8327224 21.867057,1.4121205 22.216309,-0.33413628 22.890876,0.17178931 23.836212,0.70590773 23.88699,1.6706814 23.944928,2.7714964 23.615569,2.8053742 25.223535,3.3413628 25.223535,5.1687083 26.022123,4.4740871 27.395421,5.847385 25.758855,6.6656682 20.864774,7.503077 24.722331,11.360634 26.10994,12.748243 24.054058,11.674272 24.054058,13.53252 24.054058,15.276517 26.473938,14.831211 25.223535,16.706814 24.130818,18.34589 26.185621,18.792278 25.557671,20.048177 24.891108,21.381305 23.022881,21.494253 24.221126,23.890744 26.147048,27.742589 26.380479,22.748422 24.388194,27.065039 23.57827,28.819876 26.147675,29.285096 25.557671,30.907606 24.963702,32.541021 23.925039,36.185992 24.221126,38.258605 24.503109,40.232485 23.708315,40.136568 25.056467,41.934104 25.978642,43.163671 23.878987,44.17611 25.390603,45.275467 26.233789,45.888692 25.392771,45.607436 24.054058,46.946148 23.079339,47.920867 23.087115,48.601661 24.889399,49.953375 26.582031,51.222849 24.856294,53.493366 24.388194,56.301964 23.136744,56.802544 22.373926,57.304373 20.712695,57.304373 19.614862,57.304373 18.925853,57.348106 18.373741,55.967828 16.787825,55.967828 15.25962,56.301964 13.528765,56.301964 11.79367,56.301964 9.2604238,57.040264 8.0155165,54.965419 7.1921183,53.593088 9.9437658,52.473328 9.0179253,50.621647 8.7079502,50.001697 6.9855831,50.099685 7.3472439,49.118034 7.7493373,48.026637 9.8599443,48.45644 8.5167209,47.113216 8.6280997,47.113216 8.7394784,47.113216 8.8508572,47.113216 8.7108926,45.993499 9.8927989,46.532946 10.521539,45.275467 11.049731,44.219082 11.746784,43.493485 10.35447,42.101172 9.4648528,41.211554 8.8703104,40.891644 8.5167209,39.59515 8.1364228,38.200723 7.7515138,38.021403 9.1849935,36.587923 9.9836185,35.789298 11.70375,35.456954 8.6837891,34.248969 6.765583,33.481687 8.2797757,34.203446 9.0179253,31.742947 9.2698878,30.903072 9.3006116,29.87109 9.5191298,29.069857 9.9138391,27.622589 9.7690497,27.410621 8.3496528,26.396766 9.7021242,25.382413 9.0040511,23.811739 9.6861979,22.220063 10.056164,21.356809 7.3472439,16.337763 7.3472439,21.718859 7.3472439,21.069889 5.8436306,17.782038 5.8436306,22.554199 5.8436306,23.345535 -0.0037543403,25.317044 -0.0037543403,21.050586 1.4180861,21.050586 2.8410121,21.56331 1.4998589,18.210428 0.64229133,16.066509 3.0795191,16.087165 -0.50495877,15.370269 -0.34933171,14.436507 3.0189752,13.882159 1.4998589,12.363043 0.85600759,11.719191 0.54379296,12.799601 0.83158637,11.360634 1.1989498,9.5238167 0.57263282,11.666224 -0.0037543403,11.026497 z
</Geometry>
</ControlTemplate.Resources>
<Viewbox>
<Grid>
<Path Data="{StaticResource Number1}" Fill="{TemplateBinding Background}" Margin="4,4,0,0"/>
<Path Data="{StaticResource Number1}" Fill="{TemplateBinding Foreground}"/>
<Path Data="{StaticResource Number1Bd}" Stroke="{TemplateBinding BorderBrush}" StrokeThickness="1" StrokeLineJoin="Round"/>
</Grid>
</Viewbox>
</ControlTemplate>
<LinearGradientBrush x:Key="RedGradient" EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFBBBC00" Offset="1"/>
<GradientStop Color="Red"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="BlueGradient" EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF53D4FF" Offset="1"/>
<GradientStop Color="#FF0056FF"/>
</LinearGradientBrush>
<SolidColorBrush x:Key="DarkShadow" Color="#FF222222"/>
<SolidColorBrush x:Key="GreenBorder" Color="#FF88FF00"/>
</Grid.Resources>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="50">
<Control Template="{StaticResource Number1Template}" Background="{StaticResource DarkShadow}" Foreground="{StaticResource RedGradient}" BorderBrush="{StaticResource GreenBorder}" Margin="10"/>
<Control Template="{StaticResource Number1Template}" Background="{StaticResource DarkShadow}" Foreground="{StaticResource BlueGradient}" BorderBrush="{StaticResource GreenBorder}" Margin="10"/>
</StackPanel>
</Grid>
If you are using images instead of vector geometry, the mechanism is still valid. Just define in your template all the ImageBrush resources you need to share them across all template instances.
The result can be something like this:
Re: Programmatically Removing, Cloning, and Adding Elements
Sorry for the unclear terminology, they are vectors.
Thanks for the explanation and the example! That looks like what I am trying to achieve.
Thanks for the explanation and the example! That looks like what I am trying to achieve.
Who is online
Users browsing this forum: Ahrefs [Bot] and 11 guests