<UserControl x:Class="CustomControls.ColorChangingButton"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             x:Name="ColorButton"
             xmlns:local="clr-namespace:CustomControls"
             xmlns:VSview ="clr-namespace:VSview"
             mc:Ignorable="d" 
             d:DesignHeight="60" d:DesignWidth="120" >
    
    <UserControl.Resources>
        
        <Style x:Key="StripeOverlay" TargetType="Rectangle">
            <Setter Property="Fill">
                <Setter.Value>
                    <VisualBrush  TileMode="Tile" Viewport="0,0,4,4"
                   Viewbox="0,0,10,10" ViewportUnits="Absolute" 
                   ViewboxUnits="Absolute">
                        <VisualBrush.Visual>
                            <Line X1="10" X2="0" Y1="0" Y2="10" Stroke="Black" Opacity="0.2"/>
                        </VisualBrush.Visual>
                    </VisualBrush>
                </Setter.Value>
            </Setter>
        </Style>

        <!--#region  Color changing button template-->
        <Style x:Key="ColorButtonBackground" TargetType="Border">
            <Setter Property="Background" Value="{StaticResource GreenFade}"/>
            <Style.Triggers>
                <DataTrigger Binding="{Binding Value}" Value="true">
                    <Setter Property="Background" Value="{StaticResource LightRed}"/>
                </DataTrigger>
            </Style.Triggers>
        </Style>

        <ControlTemplate x:Key="ColorButtonTempalate" TargetType="{x:Type Button}">

            <Grid RenderTransformOrigin="0.5,0.5" x:Name="RootGrid" >

                <Grid.OpacityMask>
                    <VisualBrush Visual="{Binding ElementName=Border1}" />
                </Grid.OpacityMask>

                <Border x:Name="Border1" CornerRadius="7" BorderBrush="Black" BorderThickness="0" ClipToBounds="true" Style="{StaticResource ColorButtonBackground}" >
                    <Rectangle Style="{StaticResource StripeOverlay}" Margin="0,0,0,0" RadiusX="6" RadiusY="6" Stroke="#224F4F"/>
                </Border>

                <TextBlock >
                    <TextBlock.Style>
                        <Style  TargetType="{x:Type TextBlock}">
                            <Setter Property="VerticalAlignment" Value="Center"/>
                            <Setter Property="HorizontalAlignment" Value="Center"/>
                            <Setter Property="TextAlignment" Value="Center"/>
                            <Setter Property="TextWrapping" Value="Wrap"/>
                            <Setter Property="Foreground" Value="White"/>
                            <Setter Property="FontSize" Value="{Binding RelativeSource={RelativeSource AncestorType=UserControl},Path=FontSize, FallbackValue=18}"/>
                            <Setter Property="Text" Value="{Binding TextOFF}"/>
                            <Style.Triggers>
                                <DataTrigger Binding="{Binding Value}" Value="true">
                                    <Setter Property="Text" Value="{Binding TextON}"/>
                                </DataTrigger>
                            </Style.Triggers>
                        </Style>
                    </TextBlock.Style>
                </TextBlock>
            </Grid>
            <ControlTemplate.Triggers>
                <Trigger Property ="IsPressed"  Value ="True">
                    <Setter TargetName ="RootGrid"  Property="RenderTransform">
                        <Setter.Value>
                            <ScaleTransform ScaleX="0.95" ScaleY="0.95"/>
                        </Setter.Value>
                    </Setter>
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>

        <!--#endregion-->

    </UserControl.Resources>

    <Grid>
        <DockPanel Width="auto" Height="auto"  VerticalAlignment="Stretch" HorizontalAlignment="Stretch" x:Name="LayoutRoot" >
            <Button x:Name="Button" Template="{StaticResource ColorButtonTempalate}"  Command="{Binding Command, ElementName=ColorButton}" CommandParameter="{Binding CommandPar}"  HorizontalAlignment="Stretch" Margin="0,0,0,0"  VerticalAlignment="Stretch"/>
        </DockPanel>
    </Grid>
</UserControl>
