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/

Graphic Templates in Theme and use it inside Buttons, or as graphics inside Grid etc.. How to? and ToggleButton trouble

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

Page 1 of 1

Graphic Templates in Theme and use it inside Buttons, or as graphics inside Grid etc.. How to? and ToggleButton trouble

Posted: 16 Feb 2018, 14:39
by Wanderer
It is possible to use for example Viewbox (with graphics) as template and use it for button, or as background for grid? If yes how?
Another question is if I can change the colors for those graphics templates (viewboxes and its graphics) inside button states?

I have togglebutton, and I copy - paste viewbox (created graphics) for toggle button. I have two viewboxes for two states (checked and unchecked) and I switch to hidden for one and visible for second viewbox. It is simple and it "wroking" (i created one button "succesfuly" but with little coding help), but Blend with this behavior (when I start changing visibility viewbox for checked or unchecked sate) start produce and change the code to the mess and then it crash if I try undo. Or it crash without undo and then I start thinking I am doing something bad. Maybe two viewboxes inside togglebutton is not good idea?

Re: Graphic Templates in Theme and use it inside Buttons, or as graphics inside Grid etc.. How to? and ToggleButton trou

Posted: 16 Feb 2018, 19:04
by Wanderer
I found that if I add Viewbox with canvas and graphics in Resources and add x:Key="Name", I can use it with Child="{StaticResource Name}" for any viewbox. Is it correct way? I try delete viewbox in Resources and add x:Key to Canvas, and then Viewbox in main xaml documet can display it too. But every Child="" must have StaticResource, othervise Blend don't display it.

Re: Graphic Templates in Theme and use it inside Buttons, or as graphics inside Grid etc.. How to? and ToggleButton trou

Posted: 19 Feb 2018, 10:40
by sfernandez
This piece of code:
Code: Select all
<Viewbox Stretch="Fill">
    <Grid Width="100" Height="50">
        <Rectangle Fill="Silver"/>
        <Path Data="M0.063000008,17.447999 L0,0.00025000154 17.157001,0 C13.686139,0.14171056 11.220207,0.98759408 10.812975,2.6564739 10.022673,2.846889 9.0628982,1.5314849 9.0628982,1.5314849 9.0628982,1.5314849 5.5627444,1.5314849 5.5627444,1.5314849 5.5627444,1.5314849 4.8963333,5.156 7.5213334,3.906 6.0213334,4.6976667 5.7282923,5.2023837 2.5313612,2.6564739 5.2551145,5.4328626 5.5213333,5.9893333 4.438,7.656 4.8963333,4.6976667 1.8546667,5.6143333 1.8546667,5.6143333 1.8546667,5.6143333 1.8125796,9.2814086 1.8125796,9.2814086 1.8125796,9.2814086 3.1472483,10.146193 2.9376291,11.281389 0.7708672,11.948049 0.229674,13.781369 0.063000008,17.447999 z M99.875,17.447999 L99.938,0.00025000154 82.780999,0 C86.251861,0.14171056 88.717793,0.98759408 89.125025,2.6564739 89.915327,2.846889 90.875102,1.5314849 90.875102,1.5314849 90.875102,1.5314849 94.375256,1.5314849 94.375256,1.5314849 94.375256,1.5314849 95.041667,5.156 92.416667,3.906 93.916667,4.6976667 94.209708,5.2023837 97.406639,2.6564739 94.682886,5.4328626 94.416667,5.9893333 95.5,7.656 95.041667,4.6976667 98.083333,5.6143333 98.083333,5.6143333 98.083333,5.6143333 98.12542,9.2814086 98.12542,9.2814086 98.12542,9.2814086 96.790752,10.146193 97.000371,11.281389 99.167133,11.948049 99.708326,13.781369 99.875,17.447999 z M0.063000008,32.458001 L0,49.90575 17.157001,49.906 C13.686139,49.764289 11.220207,48.918406 10.812975,47.249526 10.022673,47.059111 9.0628982,48.374515 9.0628982,48.374515 9.0628982,48.374515 5.5627444,48.374515 5.5627444,48.374515 5.5627444,48.374515 4.8963333,44.75 7.5213334,46 6.0213334,45.208333 5.7282923,44.703616 2.5313612,47.249526 5.2551145,44.473137 5.5213333,43.916667 4.438,42.25 4.8963333,45.208333 1.8546667,44.291667 1.8546667,44.291667 1.8546667,44.291667 1.8125796,40.624591 1.8125796,40.624591 1.8125796,40.624591 3.1472483,39.759807 2.9376291,38.624611 0.7708672,37.957951 0.229674,36.124631 0.063000008,32.458001 z M99.875,32.458001 L99.938,49.90575 82.780999,49.906 C86.251861,49.764289 88.717793,48.918406 89.125025,47.249526 89.915327,47.059111 90.875102,48.374515 90.875102,48.374515 90.875102,48.374515 94.375256,48.374515 94.375256,48.374515 94.375256,48.374515 95.041667,44.75 92.416667,46 93.916667,45.208333 94.209708,44.703616 97.406639,47.249526 94.682886,44.473137 94.416667,43.916667 95.5,42.25 95.041667,45.208333 98.083333,44.291667 98.083333,44.291667 98.083333,44.291667 98.12542,40.624591 98.12542,40.624591 98.12542,40.624591 96.790752,39.759807 97.000371,38.624611 99.167133,37.957951 99.708326,36.124631 99.875,32.458001 z" Stretch="Fill" Fill="Gray"/>
    </Grid>
</Viewbox>
Can be used inside a Button template:
Code: Select all
<Grid
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <Grid.Resources>
    <ControlTemplate x:Key="DecoratedButton" TargetType="Button">
        <Grid>
            <Viewbox Stretch="Fill">
                <Grid Width="100" Height="50">...</Grid>
            </Viewbox>
            <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" Margin="{TemplateBinding Padding}"/>
        </Grid>
    </ControlTemplate>
  </Grid.Resources>
  <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
    <Button Width="150" Height="60" Content="First Button" Template="{StaticResource DecoratedButton}" Margin="0,2"/>
    <Button Width="150" Height="60" Content="Second Button" Template="{StaticResource DecoratedButton}" Margin="0,2"/>
    <Button Width="150" Height="60" Content="Third Button" Template="{StaticResource DecoratedButton}" Margin="0,2"/>
  </StackPanel>
</Grid>
Or as the first child of a Grid to behave as a background:
Code: Select all
<Grid Width="500" Height="400">
    <Viewbox Stretch="Fill">
        <Grid Width="100" Height="50">...</Grid>
    </Viewbox>
    ...
</Grid>
Could you please paste here the xaml code that is giving you problems in Blend? This way I can see what could be wrong.

About adding UI elements directly as resources is not usually a good practice, as a UI element can only be set once as child of another element. It is better to create templates that you can reuse several times.

Re: Graphic Templates in Theme and use it inside Buttons, or as graphics inside Grid etc.. How to? and ToggleButton trou

Posted: 19 Feb 2018, 18:46
by Wanderer
Thanks, this is how I doing it now. I was hope that I can create graphics resource, and then only use this graphics in all kind of buttons etc.. instead adding it directly in to button template.

here is xaml original:
Code: Select all
<?xml version="1.0" encoding="UTF-8"?>
<!--This file is compatible with Silverlight-->
<Viewbox xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Name="View_ButtonMainStart" Stretch="Uniform">
    <Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" x:Name="svg8_ButtonMainStart" Width="40" Height="40">
        <Canvas.Resources>
            <SolidColorBrush xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Key="icon_Green_Light-7" Color="#FF3AE404" />
            <RadialGradientBrush xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Key="icon_Green_Light_PlayButton" MappingMode="Absolute" Center="20,1103" GradientOrigin="20,1103" RadiusX="12.658667" RadiusY="12.658667">
                <RadialGradientBrush.Transform>
                    <MatrixTransform Matrix="1 0 0 1.2633223 0 -290.318"/>
                </RadialGradientBrush.Transform>
                <RadialGradientBrush.GradientStops>
                    <GradientStopCollection>
                        <GradientStop Color="#FF3AE404" Offset="0"/>
                        <GradientStop Color="#FF2B8B0D" Offset="1"/>
                    </GradientStopCollection>
                </RadialGradientBrush.GradientStops>
            </RadialGradientBrush>
        </Canvas.Resources>
        <Canvas.RenderTransform>
            <TranslateTransform X="0" Y="0"/>
        </Canvas.RenderTransform>
        <!--Unknown tag: sodipodi:namedview-->
        <!--Unknown tag: metadata-->
        <Canvas x:Name="L__ButtonMainStart">
            <Canvas.RenderTransform>
                <TranslateTransform X="0" Y="-1082.5197"/>
            </Canvas.RenderTransform>
            <Path xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Name="button_main_play" Fill="{StaticResource icon_Green_Light_PlayButton}" StrokeThickness="2" Stroke="{StaticResource icon_Green_Light-7}" StrokeMiterLimit="4" StrokeLineJoin="Round" StrokeStartLineCap="Flat" StrokeEndLineCap="Flat" Opacity="1" Data="m 13.558309 1087.5324 a 5.0009228 5.0008298 0 0 0 -5.2169762 4.9954 v 10.0007 10.0006 a 5.0009228 5.0008298 0 0 0 7.9977262 4.0013 l 13.337737 -10.0007 a 5.0009228 5.0008298 0 0 0 0 -7.9975 l -13.337737 -10.0007 a 5.0009228 5.0008298 0 0 0 -2.78075 -0.9991 z"/>
        </Canvas>
    </Canvas>
</Viewbox>
xaml after Blend changes:
Code: Select all
<Viewbox xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Name="View_ButtonMainStart" Stretch="Uniform" Visibility="Visible">
                            <Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" x:Name="svg8_ButtonMainStart" Width="40" Height="40">
                                <Canvas.Resources>
                                    <SolidColorBrush xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Key="icon_Green_Light-7" Color="#FF3AE404" />
                                    <RadialGradientBrush xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Key="icon_Green_Light_PlayButton" MappingMode="Absolute" Center="20,1103" GradientOrigin="20,1103" RadiusX="12.658667" RadiusY="12.658667">
                                        <RadialGradientBrush.Transform>
                                            <MatrixTransform Matrix="1 0 0 1.2633223 0 -290.318"/>
                                        </RadialGradientBrush.Transform>
                                        <RadialGradientBrush.GradientStops>
                                            <GradientStopCollection>
                                                <GradientStop Color="#FF3AE404" Offset="0"/>
                                                <GradientStop Color="#FF2B8B0D" Offset="1"/>
                                            </GradientStopCollection>
                                        </RadialGradientBrush.GradientStops>
                                    </RadialGradientBrush>
                                </Canvas.Resources>
                                <Canvas.RenderTransform>
                                    <TranslateTransform X="0" Y="0"/>
                                </Canvas.RenderTransform>
                                <!--Unknown tag: sodipodi:namedview-->
                                <!--Unknown tag: metadata-->
                                <Canvas x:Name="L__ButtonMainStart">
                                    <Canvas.RenderTransform>
                                        <TranslateTransform X="0" Y="-1082.5197"/>
                                    </Canvas.RenderTransform>
                                    <Path xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Name="button_main_play" StrokeThickness="2" StrokeMiterLimit="4" StrokeLineJoin="Round" StrokeStartLineCap="Flat" StrokeEndLineCap="Flat" Opacity="1" Data="m 13.558309 1087.5324 a 5.0009228 5.0008298 0 0 0 -5.2169762 4.9954 v 10.0007 10.0006 a 5.0009228 5.0008298 0 0 0 7.9977262 4.0013 l 13.337737 -10.0007 a 5.0009228 5.0008298 0 0 0 0 -7.9975 l -13.337737 -10.0007 a 5.0009228 5.0008298 0 0 0 -2.78075 -0.9991 z">
                                        <Path.Fill>
                                            <RadialGradientBrush Center="20,1103" GradientOrigin="20,1103" MappingMode="Absolute" RadiusY="12.658667" RadiusX="12.658667">
                                                <RadialGradientBrush.Transform>
                                                    <MatrixTransform Matrix="1 0 0 1.2633223 0 -290.318"/>
                                                </RadialGradientBrush.Transform>
                                                <RadialGradientBrush.GradientStops>
                                                    <GradientStopCollection>
                                                        <GradientStop Color="{DynamicResource Color_GreenLight}" Offset="0"/>
                                                        <GradientStop Color="{DynamicResource Color_GreenMezo}" Offset="1"/>
                                                    </GradientStopCollection>
                                                </RadialGradientBrush.GradientStops>
                                            </RadialGradientBrush>
                                        </Path.Fill>
                                        <Path.Stroke>
                                            <SolidColorBrush Color="{DynamicResource Color_GreenLight}"/>
                                        </Path.Stroke>
                                    </Path>
                                </Canvas>
                            </Canvas>
                        </Viewbox>
full code to the button template:
(now it is working, but I had problem during creating states)
and another issue is, state dissapear for check and uncheck if I start record state for mouseOver and I something change for my xaml graphic. Then I must add it manualy in code, or create ToggleButton and copy/paste the states.
Code: Select all
<Style x:Key="Button_MainPlayPauseTB" TargetType="{x:Type ToggleButton}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ToggleButton}">
                    <Grid>
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualStateGroup.Transitions>
                                    <VisualTransition GeneratedDuration="0:0:0.05" To="MouseOver"/>
                                    <VisualTransition From="MouseOver" GeneratedDuration="0:0:0.5">
                                        <VisualTransition.GeneratedEasingFunction>
                                            <CubicEase EasingMode="EaseOut"/>
                                        </VisualTransition.GeneratedEasingFunction>
                                    </VisualTransition>
                                    <VisualTransition From="MouseOver" GeneratedDuration="0:0:0.03" To="Pressed"/>
                                    <VisualTransition From="Pressed" GeneratedDuration="0:0:0.03" To="MouseOver"/>
                                    <VisualTransition From="MouseOver" GeneratedDuration="0:0:0.03" To="Normal"/>
                                </VisualStateGroup.Transitions>
                                <VisualState x:Name="Normal"/>
                                <VisualState x:Name="MouseOver">
                                    <Storyboard>
                                        <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="button_main_play">
                                            <EasingColorKeyFrame KeyTime="0" Value="#FF3DB816"/>
                                        </ColorAnimationUsingKeyFrames>
                                        <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)" Storyboard.TargetName="button_main_play">
                                            <EasingColorKeyFrame KeyTime="0" Value="#FF76F54D"/>
                                        </ColorAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill)" Storyboard.TargetName="button_panel_pause1">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <RadialGradientBrush Center="10,1108" GradientOrigin="10,1108" MappingMode="Absolute" RadiusY="3" RadiusX="3">
                                                        <RadialGradientBrush.Transform>
                                                            <MatrixTransform Matrix="1,0,0,3.4999991,0,-2768.7981"/>
                                                        </RadialGradientBrush.Transform>
                                                        <GradientStop Color="#FFF1A813" Offset="0"/>
                                                        <GradientStop Color="#FF845B09" Offset="1"/>
                                                    </RadialGradientBrush>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Stroke)" Storyboard.TargetName="button_panel_pause1">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <SolidColorBrush Color="#FFF1A813"/>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Stroke)" Storyboard.TargetName="button_panel_pause2">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <SolidColorBrush Color="#FFF1A813"/>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill)" Storyboard.TargetName="button_panel_pause2">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <RadialGradientBrush Center="20,1108" GradientOrigin="20,1108" MappingMode="Absolute" RadiusY="3" RadiusX="3">
                                                        <RadialGradientBrush.Transform>
                                                            <MatrixTransform Matrix="1,0,0,3.4999991,0,-2768.7981"/>
                                                        </RadialGradientBrush.Transform>
                                                        <GradientStop Color="#FFF1A813" Offset="0"/>
                                                        <GradientStop Color="#FF845B09" Offset="1"/>
                                                    </RadialGradientBrush>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Pressed">
                                    <Storyboard>
                                        <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Stroke).(SolidColorBrush.Color)" Storyboard.TargetName="button_main_play">
                                            <EasingColorKeyFrame KeyTime="0" Value="#FF35C308"/>
                                        </ColorAnimationUsingKeyFrames>
                                        <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)" Storyboard.TargetName="button_main_play">
                                            <EasingColorKeyFrame KeyTime="0" Value="#FF37C10B"/>
                                        </ColorAnimationUsingKeyFrames>
                                        <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="button_main_play">
                                            <EasingColorKeyFrame KeyTime="0" Value="#FF1F7804"/>
                                        </ColorAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Stroke)" Storyboard.TargetName="button_panel_pause2">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <SolidColorBrush Color="#FFB67E0D"/>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill)" Storyboard.TargetName="button_panel_pause2">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <RadialGradientBrush Center="20,1108" GradientOrigin="20,1108" MappingMode="Absolute" RadiusY="3" RadiusX="3">
                                                        <RadialGradientBrush.Transform>
                                                            <MatrixTransform Matrix="1,0,0,3.4999991,0,-2768.7981"/>
                                                        </RadialGradientBrush.Transform>
                                                        <GradientStop Color="#FFB67E0D" Offset="0"/>
                                                        <GradientStop Color="#FF845B09" Offset="1"/>
                                                    </RadialGradientBrush>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Stroke)" Storyboard.TargetName="button_panel_pause1">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <SolidColorBrush Color="#FFB67E0D"/>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill)" Storyboard.TargetName="button_panel_pause1">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <RadialGradientBrush Center="10,1108" GradientOrigin="10,1108" MappingMode="Absolute" RadiusY="3" RadiusX="3">
                                                        <RadialGradientBrush.Transform>
                                                            <MatrixTransform Matrix="1,0,0,3.4999991,0,-2768.7981"/>
                                                        </RadialGradientBrush.Transform>
                                                        <GradientStop Color="#FFB67E0D" Offset="0"/>
                                                        <GradientStop Color="#FF845B09" Offset="1"/>
                                                    </RadialGradientBrush>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Disabled"/>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="CheckStates">
                                <VisualState x:Name="Checked">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="View_ButtonPause">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Visible}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="View_ButtonMainStart">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Hidden}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Unchecked"/>
                                <VisualState x:Name="Indeterminate"/>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Rectangle x:Name="Graphics_RectBackground" HorizontalAlignment="Left" StrokeStartLineCap="Flat" StrokeEndLineCap="Flat" StrokeThickness="0" StrokeMiterLimit="4" StrokeLineJoin="Miter" Width="40">
                            <Rectangle.Fill>
                                <SolidColorBrush Color="{DynamicResource Color_Alpha}"/>
                            </Rectangle.Fill>
                        </Rectangle>
                        <Viewbox xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Name="View_ButtonMainStart" Stretch="Uniform" Visibility="Visible">
                            <Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" x:Name="svg8_ButtonMainStart" Width="40" Height="40">
                                <Canvas.Resources>
                                    <SolidColorBrush xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Key="icon_Green_Light-7" Color="#FF3AE404" />
                                    <RadialGradientBrush xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Key="icon_Green_Light_PlayButton" MappingMode="Absolute" Center="20,1103" GradientOrigin="20,1103" RadiusX="12.658667" RadiusY="12.658667">
                                        <RadialGradientBrush.Transform>
                                            <MatrixTransform Matrix="1 0 0 1.2633223 0 -290.318"/>
                                        </RadialGradientBrush.Transform>
                                        <RadialGradientBrush.GradientStops>
                                            <GradientStopCollection>
                                                <GradientStop Color="#FF3AE404" Offset="0"/>
                                                <GradientStop Color="#FF2B8B0D" Offset="1"/>
                                            </GradientStopCollection>
                                        </RadialGradientBrush.GradientStops>
                                    </RadialGradientBrush>
                                </Canvas.Resources>
                                <Canvas.RenderTransform>
                                    <TranslateTransform X="0" Y="0"/>
                                </Canvas.RenderTransform>
                                <!--Unknown tag: sodipodi:namedview-->
                                <!--Unknown tag: metadata-->
                                <Canvas x:Name="L__ButtonMainStart">
                                    <Canvas.RenderTransform>
                                        <TranslateTransform X="0" Y="-1082.5197"/>
                                    </Canvas.RenderTransform>
                                    <Path xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Name="button_main_play" StrokeThickness="2" StrokeMiterLimit="4" StrokeLineJoin="Round" StrokeStartLineCap="Flat" StrokeEndLineCap="Flat" Opacity="1" Data="m 13.558309 1087.5324 a 5.0009228 5.0008298 0 0 0 -5.2169762 4.9954 v 10.0007 10.0006 a 5.0009228 5.0008298 0 0 0 7.9977262 4.0013 l 13.337737 -10.0007 a 5.0009228 5.0008298 0 0 0 0 -7.9975 l -13.337737 -10.0007 a 5.0009228 5.0008298 0 0 0 -2.78075 -0.9991 z">
                                        <Path.Fill>
                                            <RadialGradientBrush Center="20,1103" GradientOrigin="20,1103" MappingMode="Absolute" RadiusY="12.658667" RadiusX="12.658667">
                                                <RadialGradientBrush.Transform>
                                                    <MatrixTransform Matrix="1 0 0 1.2633223 0 -290.318"/>
                                                </RadialGradientBrush.Transform>
                                                <RadialGradientBrush.GradientStops>
                                                    <GradientStopCollection>
                                                        <GradientStop Color="{DynamicResource Color_GreenLight}" Offset="0"/>
                                                        <GradientStop Color="{DynamicResource Color_GreenMezo}" Offset="1"/>
                                                    </GradientStopCollection>
                                                </RadialGradientBrush.GradientStops>
                                            </RadialGradientBrush>
                                        </Path.Fill>
                                        <Path.Stroke>
                                            <SolidColorBrush Color="{DynamicResource Color_GreenLight}"/>
                                        </Path.Stroke>
                                    </Path>
                                </Canvas>
                            </Canvas>
                        </Viewbox>
                        <Viewbox xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Name="View_ButtonPause" Stretch="Uniform" Visibility="Hidden">
                            <Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" x:Name="svg8_ButtonPause" Width="30" Height="30">
                                <Canvas.Resources>
                                    <SolidColorBrush xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Key="Button_Pause" Color="#FFCB8A06" />
                                    <RadialGradientBrush xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Key="Button_Pause_Gradient1" MappingMode="Absolute" Center="20,1108" GradientOrigin="20,1108" RadiusX="3" RadiusY="3">
                                        <RadialGradientBrush.Transform>
                                            <MatrixTransform Matrix="1 0 0 3.4999991 0 -2768.7981"/>
                                        </RadialGradientBrush.Transform>
                                        <RadialGradientBrush.GradientStops>
                                            <GradientStopCollection>
                                                <GradientStop Color="#FFCB8A06" Offset="0"/>
                                                <GradientStop Color="#FF845B09" Offset="1"/>
                                            </GradientStopCollection>
                                        </RadialGradientBrush.GradientStops>
                                    </RadialGradientBrush>
                                    <RadialGradientBrush xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Key="Button_Pause_Gradient2" MappingMode="Absolute" Center="10,1108" GradientOrigin="10,1108" RadiusX="3" RadiusY="3">
                                        <RadialGradientBrush.Transform>
                                            <MatrixTransform Matrix="1 0 0 3.4999991 0 -2768.7981"/>
                                        </RadialGradientBrush.Transform>
                                        <RadialGradientBrush.GradientStops>
                                            <GradientStopCollection>
                                                <GradientStop Color="#FFCB8A06" Offset="0"/>
                                                <GradientStop Color="#FF845B09" Offset="1"/>
                                            </GradientStopCollection>
                                        </RadialGradientBrush.GradientStops>
                                    </RadialGradientBrush>
                                </Canvas.Resources>
                                <Canvas.RenderTransform>
                                    <TranslateTransform X="0" Y="0"/>
                                </Canvas.RenderTransform>
                                <!--Unknown tag: sodipodi:namedview-->
                                <!--Unknown tag: metadata-->
                                <Canvas x:Name="L_ButtonPause">
                                    <Canvas.RenderTransform>
                                        <TranslateTransform X="0" Y="-1092.5197"/>
                                    </Canvas.RenderTransform>
                                    <Path xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Name="button_panel_pause1" Fill="{StaticResource Button_Pause_Gradient2}" StrokeThickness="0.99999994" Stroke="{StaticResource Button_Pause}" StrokeMiterLimit="4" StrokeLineJoin="Round" StrokeStartLineCap="Round" StrokeEndLineCap="Round" Opacity="1" Data="m 9.5000105 1097.5197 h 0.9999865 c 1.108004 0 2.000007 0.892 2.000007 2 v 15.9999 c 0 1.108 -0.892003 2 -2.000007 2 H 9.5000105 c -1.1080037 0 -2.0000067 -0.892 -2.0000067 -2 v -15.9999 c 0 -1.108 0.892003 -2 2.0000067 -2 z"/>
                                    <Path xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Name="button_panel_pause2" Fill="{StaticResource Button_Pause_Gradient1}" StrokeThickness="0.99999994" Stroke="{StaticResource Button_Pause}" StrokeMiterLimit="4" StrokeLineJoin="Round" StrokeStartLineCap="Round" StrokeEndLineCap="Round" Opacity="1" Data="m 19.50002 1097.5197 h 0.999987 c 1.108003 0 2.000006 0.892 2.000006 2 v 15.9999 c 0 1.108 -0.892003 2 -2.000006 2 H 19.50002 c -1.108004 0 -2.000007 -0.892 -2.000007 -2 v -15.9999 c 0 -1.108 0.892003 -2 2.000007 -2 z"/>
                                </Canvas>
                            </Canvas>
                        </Viewbox>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsChecked" Value="False"/>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

Re: Graphic Templates in Theme and use it inside Buttons, or as graphics inside Grid etc.. How to? and ToggleButton trou

Posted: 23 Feb 2018, 12:35
by sfernandez
The xaml you posted works fine.

As I don't have the conflicting xaml my guess is that you are probably trying to modify the same property from different VisualStateGroups, and that is not allowed because both groups (CommonStates and CheckedStates) would try to execute their corresponding visual state transition (MouseOver and Checked) overwriting the same property animation.

For example, you cannot change the backgrond color of a Path in both MouseOver and Checked states.

Re: Graphic Templates in Theme and use it inside Buttons, or as graphics inside Grid etc.. How to? and ToggleButton trou

Posted: 23 Feb 2018, 22:22
by Wanderer
Please try create rectangle, convert it in to ToggleButton and paste the xaml original from my post (the first xaml), and try changes as I have it done in my button.

Btw. thanks for check it, maybe I need reinstall VS, because sometimes I feel it is slow or VS do unexpected behaviors.
All times are UTC+02:00
Page 1 of 1
Powered by phpBB® Forum Software © phpBB Limited
https://www.phpbb.com/