XAML Archieven - io independent publisher

How to stop a WPF Window from moving using Touch by removing the ManipulationBoundaryFeedback

When using Touch in WPF it is possible to scroll lists. It’s just that the Window is moving to give Feedback when you are reaching the end of the list. This is not always what you want. To make your application ignore this behavior you can mark the ManipulationBoundaryFeedback event handled:

.. your application is here…

</Grid>

private void ManipulationBoundaryFeedbackHandler
(object sender, ManipulationBoundaryFeedbackEventArgs e)
{
e.Handled = true;
}

The event is bubbling only, so if you place the event handler on your LayoutRoot it should work for all lists.

Actually there is also a System settings in the Panning Tab in the Pen and Touch settings dialog. This is a setting the end users can choose.

Njoy!

Nooks and Crannies of Expression Blend: Artboard Objects List

I can’t even find this one in the Keyboard Shortcut list provided in the User Guide of Expression Blend, so I made up a name for it: The Artboard Objects List:

Known from several drawing programs, this list shows the objects under the mouse cursor when you hold Ctrl and Click the Right Mouse Button. It highlights the currently selected object and lists all other objects overlapping each other from the topmost at the top of the list to the one at the bottom on the bottom of the list. Notice that the order of this list is opposite to the default order in de Objects and Timeline Panel (when you have not changed the order of the panel using the Sort by Z-order option at the bottom left of that panel). Actually, this order is logical for what it shows: the stack of objects in the Artboard under your mouse cursor.

Notice also the option to Pin or UnPin the Active Container. This makes is easier to insert newly created objects in a container like the RegularPolygon Shape in the Grid here inside the RadioButton…

Njoy!

Typography in Silverlight 5

Silverlight 5 is released and contains the Typography features that already existed in WPF. Designers can use these features to make beautiful typographic designs.

Thanks to the qualities of the OpenType font format, several typographic features are now available to every web designer. Combining TrueType and Postscript outlines in one format, smaller file sizes, more typographic control and allowing far more characters in a single font file have resulted in a much more versatile use of fonts. The Typography object is available to you inside a TextBlock or TextBox tag. Attributes of this object lead to various typographic results.

Inside a TextBlock or TextBox, a Run element is used that can only contain unformatted text. Properties of the Typography object are applied through this Run element. To group some of the Run elements together, use a <Span>. Both Run and Span have no inherent rendering.

One concept associated with typography is Kerning . Kerning is embedded in the selected font file and Silverlight has no influence on it other than being able to use it or not. You can set the Typography.Kerning attribute to False. The default setting is True.

Superscript and Subscript are Variants of normal characters in a font, placed on respectively a higher or lower baseline than the rest of the text. Other Variants are Normal, Titling, Inferior, Ordinal and Ruby. Note that a Superscript and a Subscript Variant needs to be present in the font file you use.

Nobody should use a smaller font size of normal Capitals when you really need SmallCaps. Spacing of SmallCaps is different and weight and proportion of the letters are adapted to their size and use. Also, for titling purposes capitals with elegant, slender stems are possible, if they are accounted for in the specified font. Setting the property Typography.CapitalSpacing=”True” is a good idea for titles or text that are in capitals, for the spacing between capitals and lowercase letters differs from the spacing between all capitals.

Ligatures are Alternates for two characters that would collide when spaced normally. In the lowercase combination of f and i for example, the point of character i interferes with the end of the stroke of the f regularly. So in the ligature ﬁ this issue is solved. The same is true for ﬀ, ﬂ, ﬃ, ﬄ and many other character combinations. In OpenType fonts standard ligatures are enabled by default in Silverlight 5. If for some reason standard ligatures should be disabled, use the property Typography.StandardLigatures=”False”. Other reasons for ligatures are esthetic, resulting in discretionary or historic ligatures, using Typography. DiscretionaryLigatures and Typograpy.HistoricalLigatures. Ligatures must be present in the font file for you to make them visible with the Typography object.

Swashes are decorative elements of characters associated with calligraphy. Extended serifs and strokes on existing characters may be part of your OpenFont file. To enable a Swash on a character set Typography.StandardSwashes=”1”. When a standards Swash doesn’t result in an agreeable result setting Typography.ContextualSwashes=”1 for that character is also an option.

OpenType has so many positions for characters available, that Stylistic Alternative characters are at your disposal. To enable an alternative character, set the Typograhy.StylisticAlternates property. Random use of alternatives is possible when you specify Typography.ContextualAlternates=”True”, a great way to help a script font in suggesting true handwriting. A font may also contain AnnotationAlternates. These are Glyphs in circles, squares, parentheses, diamonds or rounded boxes used for annotation of images of illustrations. In code-behind this index can be set with Typography.AnnotationAlternates.

Some characters in a font may be designed to be used together, because they look better next to each other or work together somehow. These characters are combined in a stylistic set and a maximum of 20 of these sets may be set in code-behind.

Numerical features of OpenType include Typography.Fraction=”Slashed” or Typography.Fraction=”Stacked”, old style numerals with Typography.NumeralStyle=”OldStyle” inside a Run tag and Tabular or Proportional alignment with Typography.NumeralAlignment=”Tabular” and even, where available, a slashed zero using Typography.SlashedZero=”True”.

Here’s the XAML I used for the image at the beginning:

[sourcecode language=”XML”]

[/sourcecode]

Also check out Silverlight 5 OpenType Support from Pete Brown at 10REM.NET.

Njoy!

Photoshop in METRO style 2: Filters

Recreating a Metro Style version of one of the most elaborate dialog boxes in Photoshop seemed like an interesting challenge. The comments on the post Photoshop in METRO style got met re-reading the existing documentation for METRO Style Apps…

The comments on the previous post got met re-reading the existing documentation for METRO Style Apps. It appears the content of http://msdn.microsoft.com/en-us/windows/apps is quite different when you follow the HTML5/CSS/JS path from when you follow the C++/C#/VB/XAML path. Both are far from complete and one has more complete details on specific subjects than the other. For example, the part where controls are redesigned is much more complete in the XAML section, but the general UI guidelines is more complete in the HTML5 section…

Following new insights on how to design a UI for Photoshop in METRO style I set out on creating a few new screens. Naturally time constraints don’t help in investigating this interesting Style Exercise further. I would have liked to present more screens than these two, but decided to publish this result anyway to keep a conversation going.

The Filters Gallery is one of the most elaborate dialog boxes in Photoshop. It allows you to access all filters possible and determine specific settings for filters and judge the results in the dialog itself. Recreating a Metro Style version of this dialog seemed like an interesting challenge.

The idea was to try out On-Canvas controls. These are controls that are not tucked away in an app bar at the bottom of the screen or a controls area at the top of the screen. My issue with them is that they obscure the image that you are trying to edit. I think this doesn’t help in the image editing process. I decided on a Semantic Zoom as Reidar suggested in his comments. I also wanted to show the effect of a filter on the actual image on the screen.

The Filters Gallery screen show all filters in a specific group:

Click to show a full screen image…

It has no use showing these filter effects on the actual image beneath them, because some would only show the blue sky. No effect would be visible in most cases. I opted for a small version of the current image with the filter applied in a GridView, with the title of the filter below. The title of the group is at the top of the screen. Swiping left or right or using the arrows left and right allow you to show the other groups of filters.

The Filter Detail screens will show the filter applied to the image:

Click to show a full screen image…

Swiping would show the next filter in the group applied to the image. I’ve inversed the Overlay, this way the filter is applied to the visible part of the image and you can judge the effect of the filter correctly.

Three sliders (common to most filters in the Photoshop Filter Gallery) are show over the filtered image. They are minimalistic as they don’t show any value, but the effect of changing them should be visible immediately. An issue here is contrast: what if the image is white or black behind the Slider controls? The Check icon that is frequently used in Windows Phone and Windows 8 Metro Style apps is below the image to Apply the filter to the current image. To remove it, usually a similar Trashcan icon is used. But it is unclear as to where that icon would show up in this design.

I see how so-called On-Canvas controls can help in the design of Metro Style UI’s. In this case the image below the controls is important and should ideally be visible all the time. I like the way the filter effect is visible on the image right away and changing the setting would should the effect on the image at once. This comes closer to Direct Manipulation…

Njoy!

Nooks and Crannies of Expression Blend: Inlines Collection Editor

In the category Nooks and Crannies of Expression Blend: Have you ever seen the Inlines Collection Editor? When you select a TextBlock you can find the property in the Miscellaneous Category:

Selecting the button with the Ellipsis wil pop up the Inlines Collection Editor:

Njoy!

A Style for the Silverlight CoverFlow Control Slider

I’ve been working with the Silverlight CoverFlow Control lately and think the default Silverlight Slider at the bottom of the screen sticks out like a sore thumb:

So, I’ve create a new Style for the Slider, resembling the original Cover Flow slider.

This is a Style for a Silverlight slider control, meant to be used on a black or dark background. It has rounded sides for the Track as well as the Thumb. The Track looks like it is lower because of the inner shadow at the top. The Thumb also has a shadow, but its surface is flat. This is only the Horizontal Template, so nothing will show when it is used vertically.

The Project File is on my SkyDrive, but the Style is simple enough to reproduce it here…

De XAML is a regular Slider with a Style:

[sourcecode language=”XML”]<Slider Style="{StaticResource CoverFlowSliderControl}" Maximum="100" LargeChange="10" SmallChange="1" Value="50"/>[/sourcecode]

The Track has its own style, used in the ControlTemplate later on:

[sourcecode language=”XML”]<Style x:Key="CoverFlowSliderTrackStyle" TargetType="Rectangle">
<Setter Property="RadiusY" Value="12" />
<Setter Property="RadiusX" Value="12" />
<Setter Property="StrokeThickness" Value="2"/>
<Setter Property="Stroke">
<Setter.Value>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF202020" Offset="0"/>
<GradientStop Color="#FF404040" Offset="1"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="Fill">
<Setter.Value>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Black" Offset="0"/>
<GradientStop Color="#FF202020" Offset="0.4"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Style>[/sourcecode]

The Thumb is no more than two rectangles, but both have their own Style:

[sourcecode language=”XML”]<Style x:Key="CoverFlowSliderThumb" TargetType="Rectangle">
<Setter Property="RadiusY" Value="10" />
<Setter Property="RadiusX" Value="10" />
<Setter Property="StrokeThickness" Value="2" />
<Setter Property="Stroke" Value="#FF4B4B4B"/>
<Setter Property="Fill">
<Setter.Value>
<LinearGradientBrush EndPoint="0.5,1" MappingMode="RelativeToBoundingBox" StartPoint="0.43,-0.02">
<GradientStop Color="#FF252525" Offset="1"/>
<GradientStop Color="#FF787878" Offset="0"/>
<GradientStop Color="#FF424242" Offset="0.622"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="CoverFlowSliderThumbCover" TargetType="Rectangle">
<Setter Property="RadiusY" Value="8" />
<Setter Property="RadiusX" Value="8" />
<Setter Property="StrokeThickness" Value="0" />
<Setter Property="Fill" Value="#FF404040" />
<Setter Property="Margin" Value="3" />
</Style>
<Style x:Key="ThumbStyle" TargetType="Thumb">
<Setter Property="Margin" Value="0,2" />
<Setter Property="Width" Value="50" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Thumb">
<Grid Margin="2,0">
<Rectangle x:Name="Thumb" Style="{StaticResource CoverFlowSliderThumb}"/>
<Rectangle x:Name="ThumbCover" Style="{StaticResource CoverFlowSliderThumbCover}"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="Effect">
<Setter.Value>
<DropShadowEffect Direction="360" Opacity="0.5" ShadowDepth="3"/>
</Setter.Value>
</Setter>
</Style>[/sourcecode]

There are two Repeatbuttons to the left and to the right of the Thumb. They are invisible and use the same Style:

[sourcecode language=”XML”]<Style x:Key="RepeatButtonStyle" TargetType="RepeatButton">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="RepeatButton">
<Grid>
<Rectangle RadiusY="6" RadiusX="6" StrokeThickness="2" Fill="Transparent"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>[/sourcecode]

Finally, here is the Style for the Slider Control with the ControlTemplate that uses all Styles above…

[sourcecode language=”XML”]<Style x:Key="CoverFlowSliderControl" TargetType="Slider">
<Setter Property="Height" Value="24" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Slider">
<Grid x:Name="HorizontalTemplate">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Rectangle x:Name="Track" Grid.ColumnSpan="3" Style="{StaticResource CoverFlowSliderTrackStyle}"/>
<RepeatButton x:Name="HorizontalTrackLargeChangeDecreaseRepeatButton" Grid.Column="0" Style="{StaticResource RepeatButtonStyle}"/>
<Thumb x:Name="HorizontalThumb" Grid.Column="1" Style="{StaticResource ThumbStyle}"/>
<RepeatButton x:Name="HorizontalTrackLargeChangeIncreaseRepeatButton" Grid.Column="2" Style="{StaticResource RepeatButtonStyle}"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>[/sourcecode]

The result is a Cover Flow Slider that nicely fits in with the rest of the Cover Flow Control:

Njoy!

Check out the Comments below about why this picture is up here…

Download the source for this Slider

Nieuw leven voor Silverlight: Silverlight 5 beta in april

De beta van Silverlight 5 wordt in de lente verwacht, waarschijnlijk tijdens de MIX 2011 conferentie op 12 tot en met 14 april in Las Vegas. De definitieve versie van Silverlight 5 wordt daarop in de loop van 2011 uitgebracht.

Ook bij de komende versie van Silverlight is gekeken naar de features die het meest gevraagd zijn op silverlight.mswish.net. Daar staan Full Databinding support en 3D bovenaan in de lijst. Verschillende aangekondigde features vindt je terug in de bovenste regionen, maar ook andere handige features worden onderdeel van Silverlight 5. Nadruk ligt op verbetering en uitbreiding van de bestaande functionaliteit, maar er zijn een paar uitzonderingen: ondersteuning voor 3D bijvoorbeeld.

3D en graphics

De grootste verassing in de Keynote van Scott Guthrie op de Silverlight Firestarter Web Cast was voor mij de aankondiging van 3D voor Silverlight. In de keynote video is vanaf 50:50 tot 55:50 een indrukwekkende demo te zien van wat er mogelijk wordt met 3D in Silverlight. Of 3D op dezelfde manier gaat werken als in Windows Presentation Foundation, valt nog te bezien. Er zijn in ieder geval modellen, animated cameras, textures en bumpmapping in de Silverlight implementatie aanwezig. De performance van de demo is in indrukwekkend. Grafische verbeteringen als een 3D immediate Mode Graphics API, GPU accelerated 3D zullen daaraan bijgedragen hebben. Daarnaast zijn Fluid Layout Transitions in Silverlight 5 beschikbaar, die het animeren van onderdelen van de UI nog eenvoudiger maken.

Tekst en printen

Daarnaast krijgt Silverlight 5 serieuze typografische verbeteringen. De scherpte van de tekst wordt verbeterd, het wordt mogelijk om tekst over meerdere kolommen te laten lopen. Er wordt volledige OpenType support beloofd, waaronder de toepassing van Leading en Kerning van characters in lettertypes. Het printen van tekst in Postscript vector format maakt niet alleen haarscherpe prints mogelijk, maar zal ook meer controle bieden over wat er precies geprint wordt en niet alleen wat er in de visual tree aanwezig is.

Data en binding

Een ander opmerkelijke en nuttige feature in Silverlight 5 wordt het zetten van breakpoints in de XAML. Dit werkt hetzelfde als breakpoints in code, maar zal daadwerkelijk een XAML-bestand openen en stoppen op de regel met het breakpoint. Van daaruit is het debuggen van data binding voorhanden. In de Locals Window worden fouten in de binding en in de final source de properties met de huidige waarden daarvan zichtbaar. Dat maakt het oplossen van problemen met bindings een stuk eenvoudiger. Bindings on Style setters maken het veranderen van application resources beschikbaar, zodat het onmiddelijk veranderen van Themes eindelijk wel kan. Voor RIA services kan data opgeslagen worden in de cloud. Custom markup extentions helpen om een MVVM patroon beter te implementeren. Implicit Data Templates zorgt voor een default uiterlijk van een bepaald datatype over de hele applicatie heen. Relative Source binding maakt WPF features voor databinding eindelijk beschikbaar in Silverlight.

Media

Hardware media decodering geeft betere video-ervaring, terwijl CPU en batterij worden ontzien. Power Management zal bij dat laatste zelfs nog meer helpen. Pitch correction voor audio en video heet in Silverlight 5 TrickPlay. Silverlight krijgt ook de functionaliteit om afstandbedieningen aan te sturen, zodat een zogenoemde “Ten feet experience” beter ondersteund kan worden vanuit een Silverlight applicatie. Ik hoop nog altijd dat MediaCenter Markup Language (MCML) wordt vervangen door XAML, maar dat is wellicht een brug te ver. IIS Media Services 4.0 maakt smooth streaming naar WP7, maar ook de iPhone en de iPad mogelijk met betere performance en meer mogelijkheden. Het wordt bijvoorbeeld mogelijk om Azure te gebruiken voor IIS Media Services.

Silverlight 5 zal weer talloze verbeteringen hebben ten opzichte van de huidige versie. Zo komt er een 64-bit Silverlight Runtime die sneller start, beter presteert en meer mogelijkheden biedt. Een Coded UI recorder brengt testen van de userinterface binnen bereik. Out-of-Browser Silverlight applicaties kunnen meerdere subwindows hebben, die zelfs snappen naar de kanten van het scherm in Windows 7. Entreprise Policy support laat trusted applications binnen die vertrouwde omgeving uit de sandbox komen. P/invoke laat je unmanaged DLLs en Win32 APIs aanspreken voor betere integratie met het OS en met apparaten.

Als wilt kan je alles nog eens nalezen op de Future of Microsoft Silverlight site.

When dynamically creating objects in code, use Styles

When you need to create objects in code, you can actually build up the entire look and feel in code.

This results in large blocks of code that do nothing special, but set the visual properties of an object:

Grid grdNow = new Grid();

//create Circle

Ellipse cirNow = new Ellipse();

cirNow.Height = 25;

cirNow.Width = 25;

cirNow.VerticalAlignment = VerticalAlignment .Center;

cirNow.HorizontalAlignment = HorizontalAlignment.Center;

cirNow.Fill = new SolidColorBrush (Colors.Red);

cirNow.Margin =new Thickness(5,5,5,5);

//create TextBlock

TextBlock txtNow = new TextBlock();

txtNow.VerticalAlignment = VerticalAlignment.Center;

txtNow.HorizontalAlignment = HorizontalAlignment.Center;

txtNow.Foreground = new SolidColorBrush(Colors.White);

txtNow.FontWeight = FontWeights.Bold;

txtNow.FontSize = 14;

txtNow.Margin =new Thickness(0,0,0,2);

txtNow.TextWrapping = TextWrapping.NoWrap;

txtNow.Text="now";

//add objects to grid

grdNow.Children.Add(cirNow);

grdNow.Children.Add(txtNow);

The drawback of this is that it is a lot of code and hard to maintain. The looks are integrated in the code and that is not what you want.

In Silverlight and WPF there is a standard model to separate the code from the look and feel of the application you’re building. It’s called XAML.

XAML is a markup language that’s easily generated by code and easily maintained by non-programmers with tools of even by hand.

When you are creating objects on the fly you should use Styles. These determine the way the object looks. Only keep the properties necessary for dynamically placing your object on the screen in your code:

Grid grdNow = new Grid();
Ellipse cirNow = new Ellipse();
TextBlock txtNow = new TextBlock();

cirNow.Style = App.Current.Resources["NowStyle"] as Style;
txtNow.Style = App.Current.Resources["NowTextStyle"] as Style;

grdNow.Children.Add(cirNow);
grdNow.Children.Add(txtNow);

This is a lot less code. Below is the markup that you shouldn’t have to worry about when you use Styles in your C# code.

You can even just create an empty Style block in App.xaml: <Style x:Key=”NowStyle” TargetType=”Ellipse” /> and thus use it with default values.

The look of these dynamically created objects can be changed later on or even be themed using a separate ResourceDictionary. A designer can come in at any time and change these properties using a Tool like Expression Blend.

So, when you find yourself creating a lot of C# code to set the visual properties of a dynamically created objects: Stop!

Create a Style in XAML and refer to that Style instead.

Njoy!

Using Silverlight 4 StringFormat for Data Binding a TextBlock to a Slider with no decimals showing

In Silverlight 4 it is possible to use the StringFormat extention to format output from Data Binding. I was always looking for a way to remove the trailing decimals from a TextBlock that was bound to a Slider. Today I found the answer:

This says: Use the result as a number with zero decimals.

Use StringFormat=\{0:n1\}} if you want one decimal and StringFormat=\{0:n2\}} for two decimals. You can also use StringFormat=p for Percentage, StringFormat=c for Currency…

The Designer Silverlight site has more details…

Njoy!

Create a Button Control from an Expression Design drawing

Here are the steps to implement a Expression Design drawing as a Button Control.

I’ve placed a PushButton Design file in the Expression Gallery. A thousand people have actually downloaded the .design file. Only one question rose, asking how to implement that drawing as a Button Control. Here are the steps to do that:

In Design:
– Click the square on the Layer named PushButton to select all elements
– Select File/Export and in the dialog choose XAML Silverlight 4 Canvas, Leave Text Editable, set Live Effects to Convert to XAML, call it PushButtonNormal.xaml, remember where it is located after export. Click Export All.
– Click the square on the second Layer named PushButton Pressed to select all elements
-Select File/Export and use the same settings and location. Name it PushButtonPressed.xaml. Click Export All.

In Blend:

– Start a new Blend Silverlight Application, Call it PushButtonControl
– Open MainPage.xaml in the Code Editor using View/Active Document View/XAML View.
– Create a closing the tag for the Grid Named LayoutRoot.
– Open the PushButtonNormal.xaml file in Notepad. Cut the inner Canvas named PushButton, Paste in inside the LayoutRoot Canvas and remove Width, Height and Canvas.Left and Canvas.Top.
– Open the PushButtonPressed.xaml file in Notepad. Cut the inner Canvas named PushButton_Pressed, Paste it under the PushButton Canvas and remove Width, Height and Canvas.Left and Canvas.Top.
– Resolve naming conflicts for Ellipses, you can only have objects with unique names.
– Switch to Design Vieww using View/Active Document View/Design View.
– Right Click the PushButton Layer in the Objects and Timeline Panel. Select Group into…/Grid from the context menu.
– Right Click the PushButton layer in the Objects and Timeline Panel. Select Make into Control… from the context menu.
– In the dialog select the Button control and name it PushButtonControl. Click OK.
– This will create a Button Control and open ControlTemplate Editing Mode. A ContentPresenter is added to the Button. Because the PushButton container is a Canvas you have to reposition this using the Left and Top properties.
– Click the [Button] button in de Breadcrumbs at the top left of the Artboard to go out of Template Editing Mode.
– Right Click the PushButton_Pressed layer in the Objects and Timeline Panel. Select Cut from the context menu.
– Left Click the [Grid] layer in the Objects and Timeline Panel. Select the [Grid] button in de Breadcrumbs at the top left of the Artboard to go into Template Editing Mode again.
– Right Click the [Grid] layer and select Paste from the context menu. This will place the Pressed state of the button over the Normal state. Remove the top most Ellipse. This is the transparent shadow and should not show twice. Drag the PushButton_Pressed layer up so it is above the [ContentPresenter] layer. The word Button should appear.
– Set the Opacity Property of PushButton_Pressed to Zero (0%).
– Now you should have a [Grid] with 3 layer in it: PushButton, PushButton_Pressed and [ContentPresenter]. The Normal state should be visible. The word Button should be visible in it.
– Open the States Panel (Window/States should have a check before it) and select the Pressed State. The Pressed state recording should go on, showing a red frame around the Artboard.
– Set the Opacity of PushButton_Pressed back to 100%.
– Click the Base layer at the top of the States Panel and switch between the Pressed and Base state. Make sure the Buttons overlap exactly.
– Click the [Button] button in de Breadcrumbs at the top left of the Artboard to go out of Template Editing Mode.
– Select File/Save all
– Press F5 to build the project, so you can test it.

Optimization would include replacing the Canvases with Grid containers while keeping all Ellipses in their places. This would allow for better control of button size and placement of the ContentPresenter.

Njoy!