mHelpMe
mHelpMe

Reputation: 6668

WPF glowing button

I have a WPF application. Where I have a toggle button that has a glass effect. When the button is checked the button fills blue which in the code below has been commented out. I have created a rectangle with a glow effect and would like this to be activated when the IsChecked = true. At the moment it doesn't appear to be doing anything.

<Style x:Key="ToggleButtonTemplate" TargetType="ToggleButton">
        <Setter Property="Cursor" Value="Hand"/>
        <Setter Property="FontSize" Value="12" />
        <Setter Property="Foreground" Value="White" />
        <Setter Property="Margin" Value="5,5,5,5"/>
        <Setter Property="IsChecked" Value="{Binding SecurityList[0].Run}"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ToggleButton}">
                    <Border x:Name="ButtonBorder" 
                              CornerRadius="15,15,15,15" 
                              BorderThickness="3,3,3,3" 
                              Background="#AA000000"  
                              BorderBrush="#99FFFFFF"
                              RenderTransformOrigin="0.5,0.5">
                        <Grid>                                
                            <Grid.RowDefinitions>
                                <RowDefinition Height="*"/>
                                <RowDefinition Height="1.7*"/>
                            </Grid.RowDefinitions>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition/>
                                <ColumnDefinition/>
                            </Grid.ColumnDefinitions>
                            <Border Grid.Row="0" Grid.ColumnSpan="2" CornerRadius="23,23,0,0">
                                <Border.Background>
                                    <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                                        <GradientStop Color="#08FFFFFF" Offset="0"/>
                                        <GradientStop Color="#88FFFFFF" Offset="1"/>
                                    </LinearGradientBrush>
                                </Border.Background>
                            </Border>
                            <ContentPresenter x:Name="ButtonContentPresenter"
                            VerticalAlignment="Center"  
                            Grid.RowSpan="2" 
                            HorizontalAlignment="Center"/>
                            <Rectangle x:Name="recGlow" HorizontalAlignment="Left" Stroke="Black" 
                                       VerticalAlignment="Top" Opacity="0">
                                <Rectangle.Fill>
                                    <RadialGradientBrush>
                                        <RadialGradientBrush.RelativeTransform>
                                            <TransformGroup>
                                                <ScaleTransform CenterY="0.5" CenterX="0.5" ScaleY="1.248" ScaleX="1.276"/>
                                                <SkewTransform CenterY="0.5" CenterX="0.5"/>
                                                <RotateTransform CenterY="0.5" CenterX="0.5"/>
                                                <TranslateTransform Y="0.317" X="-0.007"/>
                                            </TransformGroup>
                                        </RadialGradientBrush.RelativeTransform>
                                        <GradientStop Color="#FF088CE8" Offset="0"/>
                                        <GradientStop Offset="1"/>
                                    </RadialGradientBrush>
                                </Rectangle.Fill>
                            </Rectangle>
                            <TextBlock Grid.Row="0" Grid.ColumnSpan="2" Text="GBP / USD" HorizontalAlignment="Center" VerticalAlignment="Center" FontWeight="SemiBold"/>
                            <Image Grid.Row="1" Grid.Column="0" Source="/Resources/GBP.ico"/>
                            <Image Grid.Row="1" Grid.Column="1" Source="/Resources/USD.ico"/>
                        </Grid>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsChecked" Value="True">
                            <!--<Setter TargetName="ButtonBorder" Property="Background" Value="Blue"/>-->
                            <Setter TargetName="recGlow" Property="Opacity" Value="0.8"/>
                            <Setter Property="RenderTransform" TargetName="ButtonBorder">                                    
                                <Setter.Value>
                                    <TransformGroup>
                                        <ScaleTransform ScaleX="1.1" ScaleY="1.1"/>
                                    </TransformGroup>
                                </Setter.Value>
                            </Setter>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

Upvotes: 0

Views: 904

Answers (1)

Rohit Vats
Rohit Vats

Reputation: 81313

Rectangle is too small to be observed.

Set HorizontalAlignment and VerticalAlignment to Stretch and set Grid.ColumnSpan to 2 on rectangle -

<Rectangle x:Name="recGlow" HorizontalAlignment="Stretch" Stroke="Black" 
           VerticalAlignment="Stretch" Opacity="0" Grid.ColumnSpan="2">

Upvotes: 2

Related Questions