ModernToggleButton

Oct 22, 2013 at 1:15 PM
I need a toggle button so I made a simple one in VB:

ModernToggleButton.vb:
Imports FirstFloor.ModernUI.Windows.Controls
Imports System.ComponentModel


Public Class ModernToggleButton
    Inherits ModernButton
    Implements INotifyPropertyChanged

    Public Event PropertyChanged(sender As Object, e As PropertyChangedEventArgs) Implements INotifyPropertyChanged.PropertyChanged

    Public Sub New()
        MyBase.New()
        Try
            ' load the ModernToggleButton Style Resource from the current control library
            Dim resourceDictionary = New ResourceDictionary()
            resourceDictionary.Source = New Uri("MyControlLib;component/Controls/ModernToggleButton.Style.xaml", UriKind.Relative)
            Me.Resources.MergedDictionaries.Add(resourceDictionary)

        Catch ex As Exception
            Throw New Exception("Failed to find resource for ModernToggleButton")
        End Try
    End Sub


    ''' <summary>
    ''' IsChecked Property
    ''' </summary>
    ''' 
    Public Shared IsCheckedProperty As DependencyProperty = DependencyProperty.Register("IsChecked", GetType(Boolean), GetType(ModernToggleButton), New PropertyMetadata(False))

    Public Property IsChecked As Boolean
        Get
            Return DirectCast(GetValue(IsCheckedProperty), Boolean)
        End Get
        Set(value As Boolean)
            SetValue(IsCheckedProperty, value)
            RaiseEvent PropertyChanged(Me, New PropertyChangedEventArgs("IsChecked"))
        End Set
    End Property

    Public Sub ToggleButton_Click(sender As Object, e As RoutedEventArgs) Handles Me.Click
        IsChecked = Not IsChecked
    End Sub

End Class
ModernToggleButton.Style.xaml
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:mui="http://firstfloorsoftware.com/ModernUI"
                    xmlns:local="clr-namespace:MyControlLib">

    <Style TargetType="{x:Type local:ModernToggleButton}" BasedOn="{StaticResource {x:Type mui:ModernButton}}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="local:ModernToggleButton">
                        <Grid x:Name="grid"
                          Margin="{TemplateBinding Padding}"
                          Background="Transparent">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto" />
                                <ColumnDefinition />
                            </Grid.ColumnDefinitions>

                            <Grid Width="{TemplateBinding EllipseDiameter}" Height="{TemplateBinding EllipseDiameter}">
                                <Ellipse x:Name="ellipse"
                                     VerticalAlignment="Stretch"
                                     Stroke="{DynamicResource ModernButtonBorder}"
                                     StrokeThickness="{TemplateBinding EllipseStrokeThickness}" />
                                <Path x:Name="icon"
                                  Width="{TemplateBinding IconWidth}"
                                  Height="{TemplateBinding IconHeight}"
                                  HorizontalAlignment="Center"
                                  VerticalAlignment="Center"
                                  Data="{TemplateBinding IconData}"
                                  Fill="{TemplateBinding Foreground}"
                                  Stretch="Uniform" />
                            </Grid>
                            <Grid Grid.Column="1">
                                <TextBlock Margin="4,-1,0,0"
                                       VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                       DataContext="{TemplateBinding Content}"
                                       Foreground="{TemplateBinding Foreground}"
                                       Text="{Binding Converter={StaticResource ToLowerConverter}}"
                                       TextTrimming="CharacterEllipsis"
                                       Visibility="{Binding Converter={StaticResource NullOrEmptyStringToVisibilityConverter},
                                                            ConverterParameter=inverse}" />
                            </Grid>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="Foreground" Value="{DynamicResource ModernButtonTextHover}" />
                                <Setter TargetName="ellipse" Property="Stroke" Value="{DynamicResource ModernButtonBorderHover}" />
                            </Trigger>
                            <Trigger Property="IsPressed" Value="True">
                                <Setter Property="Foreground" Value="{DynamicResource ModernButtonTextPressed}" />
                                <Setter TargetName="ellipse" Property="Stroke" Value="{DynamicResource ModernButtonBorderPressed}" />
                                <Setter TargetName="ellipse" Property="Fill" Value="{DynamicResource ModernButtonIconBackgroundPressed}" />
                                <Setter TargetName="icon" Property="Fill" Value="{DynamicResource ModernButtonIconForegroundPressed}" />
                            </Trigger>
                            <Trigger Property="IsChecked" Value="True">
                                <Setter Property="Foreground" Value="{DynamicResource ModernButtonTextPressed}" />
                                <Setter TargetName="ellipse" Property="Stroke" Value="{DynamicResource ModernButtonBorderPressed}" />
                                <Setter TargetName="ellipse" Property="Fill" Value="{DynamicResource ModernButtonIconBackgroundPressed}" />
                                <Setter TargetName="icon" Property="Fill" Value="{DynamicResource ModernButtonIconForegroundPressed}" />
                            </Trigger>
                            <Trigger Property="IsEnabled" Value="false">
                                <Setter Property="Foreground" Value="{DynamicResource ModernButtonTextDisabled}" />
                                <Setter TargetName="ellipse" Property="Stroke" Value="{DynamicResource ModernButtonBorderDisabled}" />
                            </Trigger>
                            <Trigger Property="IsFocused" Value="true">
                                <Setter TargetName="ellipse" Property="Stroke" Value="{DynamicResource Accent}" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
</ResourceDictionary>
Nov 10, 2013 at 5:14 PM
Tried without success. I created class library project and add these 2 files. added reference to modernui lib. no dice.

thanks.
Nov 10, 2013 at 6:00 PM
Did you change the name of the class library and the path of the ModernToggleButton.Style.xaml?

In XAML:
Change this
xmlns:local="clr-namespace:MyControlLib"
To
xmlns:local="clr-namespace:YourClassLibName"

In VB:
Change this
resourceDictionary.Source = New Uri("MyControlLib;component/Controls/ModernToggleButton.Style.xaml", UriKind.Relative)
To
resourceDictionary.Source = New Uri("YourClassLibName;component/PathInYourClassLib/ModernToggleButton.Style.xaml", UriKind.Relative)
Aug 6, 2014 at 10:43 AM
I also needed a toggle button an easy solution was to create a custom style with a trigger:
 <Style x:Key="DaToggle" TargetType="ToggleButton" BasedOn="{StaticResource {x:Type ToggleButton}}">
                <Style.Triggers>
                    <Trigger Property="IsChecked" Value="true">
                        <Setter Property="Button.Background" Value="Aqua"></Setter>
                    </Trigger>
                </Style.Triggers>
            </Style>
Jan 25, 2015 at 8:11 AM
Look at my post at the end of https://mui.codeplex.com/discussions/442290 There is the templated solution.