Drawer button styling

7 posts, 0 answers
  1. Priom
    Priom avatar
    12 posts
    Member since:
    Jan 2014

    Posted 04 Dec 2015 Link to this post

    I want to change the default drawer button. Please provide a sample code for DrawerButtonStyle.
  2. Ivaylo Gergov
    Admin
    Ivaylo Gergov avatar
    661 posts

    Posted 09 Dec 2015 Link to this post

    Hello,

    Thank you for your interest.

    Here's an example:

    <primitives:RadSideDrawer>
        <primitives:RadSideDrawer.DrawerButtonStyle>
            <Style TargetType="primitivesSideDrawer:DrawerButton">
                <Setter Property="Foreground" Value="Green" />
            </Style>
        </primitives:RadSideDrawer.DrawerButtonStyle>
    </primitives:RadSideDrawer>

    where: 

    xmlns:primitives="using:Telerik.UI.Xaml.Controls.Primitives"
    xmlns:primitivesSideDrawer="using:Telerik.UI.Xaml.Controls.Primitives.SideDrawer"

    I hope this helps.

    Regards,
    Ivaylo Gergov
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. DevCraft banner
  4. Priom
    Priom avatar
    12 posts
    Member since:
    Jan 2014

    Posted 27 Dec 2015 in reply to Ivaylo Gergov Link to this post

    Thanks for your help but i am not happy with the default positioning of drawer button. Please provide a sample application.
  5. Priom
    Priom avatar
    12 posts
    Member since:
    Jan 2014

    Posted 27 Dec 2015 Link to this post

    <Page.Resources>
            <Style x:Key="MaterialDesignHamburgerToggleButton" TargetType="ToggleButton">
                <Setter Property="Foreground" Value="{ThemeResource ToggleButtonForegroundThemeBrush}"/>
                <Setter Property="Background" Value="Transparent" />
                <Setter Property="UseSystemFocusVisuals" Value="True"/>
                <Setter Property="BorderThickness" Value="1"/>
                <Setter Property="HorizontalContentAlignment" Value="Center"/>
                <Setter Property="VerticalContentAlignment" Value="Center"/>
                <Setter Property="Width" Value="37" />
                <Setter Property="Height" Value="37" />
                <Setter Property="Padding" Value="1"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="ToggleButton">
                            <Border Background="{TemplateBinding Background}">
                                <VisualStateManager.VisualStateGroups>
                                    <VisualStateGroup x:Name="CheckStates">
                                        <VisualStateGroup.Transitions>
                                            <VisualTransition From="*" To="Checked">
                                                <Storyboard>
                                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" Storyboard.TargetName="rectangle">
                                                        <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="45"/>
                                                    </DoubleAnimationUsingKeyFrames>
                                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="rectangle">
                                                        <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0.581"/>
                                                    </DoubleAnimationUsingKeyFrames>
                                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="rectangle">
                                                        <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="4.875"/>
                                                    </DoubleAnimationUsingKeyFrames>
                                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="rectangle">
                                                        <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="1.875"/>
                                                    </DoubleAnimationUsingKeyFrames>
                                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" Storyboard.TargetName="rectangle2">
                                                        <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="-45"/>
                                                    </DoubleAnimationUsingKeyFrames>
                                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="rectangle2">
                                                        <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0.581"/>
                                                    </DoubleAnimationUsingKeyFrames>
                                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="rectangle2">
                                                        <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="4.832"/>
                                                    </DoubleAnimationUsingKeyFrames>
                                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="rectangle2">
                                                        <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="-2.082"/>
                                                    </DoubleAnimationUsingKeyFrames>
                                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="rectangle1">
                                                        <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0.889"/>
                                                    </DoubleAnimationUsingKeyFrames>
                                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="rectangle1">
                                                        <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="-1"/>
                                                    </DoubleAnimationUsingKeyFrames>
                                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" Storyboard.TargetName="canvas">
                                                        <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                                                        <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="-180"/>
                                                    </DoubleAnimationUsingKeyFrames>
                                                </Storyboard>
                                            </VisualTransition>
                                            <VisualTransition From="Checked" To="Normal">
                                                <Storyboard>
                                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" Storyboard.TargetName="rectangle">
                                                        <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0"/>
                                                    </DoubleAnimationUsingKeyFrames>
                                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="rectangle">
                                                        <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="1"/>
                                                    </DoubleAnimationUsingKeyFrames>
                                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="rectangle">
                                                        <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0"/>
                                                    </DoubleAnimationUsingKeyFrames>
                                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="rectangle">
                                                        <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0"/>
                                                    </DoubleAnimationUsingKeyFrames>
                                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" Storyboard.TargetName="rectangle2">
                                                        <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0"/>
                                                    </DoubleAnimationUsingKeyFrames>
                                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="rectangle2">
                                                        <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="1"/>
                                                    </DoubleAnimationUsingKeyFrames>
                                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="rectangle2">
                                                        <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0"/>
                                                    </DoubleAnimationUsingKeyFrames>
                                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="rectangle2">
                                                        <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0"/>
                                                    </DoubleAnimationUsingKeyFrames>
                                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="rectangle1">
                                                        <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="1"/>
                                                    </DoubleAnimationUsingKeyFrames>
                                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="rectangle1">
                                                        <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0"/>
                                                    </DoubleAnimationUsingKeyFrames>
                                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" Storyboard.TargetName="canvas">
                                                        <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0"/>
                                                    </DoubleAnimationUsingKeyFrames>
                                                </Storyboard>
                                            </VisualTransition>
                                        </VisualStateGroup.Transitions>
                                        <VisualState x:Name="Checked">
                                            <Storyboard>
                                                <DoubleAnimation Duration="0" To="45" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" Storyboard.TargetName="rectangle" />
                                                <DoubleAnimation Duration="0" To="0.581" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="rectangle" />
                                                <DoubleAnimation Duration="0" To="4.875" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="rectangle" />
                                                <DoubleAnimation Duration="0" To="1.875" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="rectangle" />
                                                <DoubleAnimation Duration="0" To="-45" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" Storyboard.TargetName="rectangle2" />
                                                <DoubleAnimation Duration="0" To="0.581" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="rectangle2" />
                                                <DoubleAnimation Duration="0" To="4.832" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="rectangle2" />
                                                <DoubleAnimation Duration="0" To="-2.082" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="rectangle2" />
                                                <DoubleAnimation Duration="0" To="0.889" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="rectangle1" />
                                                <DoubleAnimation Duration="0" To="-1" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="rectangle1" />
                                                <DoubleAnimation Duration="0" To="-180" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" Storyboard.TargetName="canvas" />
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="Normal">
                                            <Storyboard>
                                                <DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" Storyboard.TargetName="rectangle" />
                                                <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="rectangle" />
                                                <DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="rectangle" />
                                                <DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="rectangle" />
                                                <DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" Storyboard.TargetName="rectangle2" />
                                                <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="rectangle2" />
                                                <DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="rectangle2" />
                                                <DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="rectangle2" />
                                                <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="rectangle1" />
                                                <DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="rectangle1" />
                                                <DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" Storyboard.TargetName="canvas" />
                                            </Storyboard>
                                        </VisualState>
                                    </VisualStateGroup>
                                </VisualStateManager.VisualStateGroups>
                                <Viewbox>
                                    <Canvas x:Name="canvas" Width="24" Height="24" RenderTransformOrigin="0.5,0.5">
                                        <Canvas.RenderTransform>
                                            <TransformGroup>
                                                <ScaleTransform/>
                                                <SkewTransform/>
                                                <RotateTransform/>
                                                <TranslateTransform/>
                                            </TransformGroup>
                                        </Canvas.RenderTransform>
                                        <Rectangle x:Name="rectangle" Fill="{TemplateBinding Foreground}" Height="2" Canvas.Left="3" RadiusY="0" RadiusX="0" Canvas.Top="6" Width="18" RenderTransformOrigin="0.5,0.5"
      >
                                            <Rectangle.RenderTransform>
                                                <TransformGroup>
                                                    <ScaleTransform/>
                                                    <SkewTransform/>
                                                    <RotateTransform/>
                                                    <TranslateTransform/>
                                                </TransformGroup>
                                            </Rectangle.RenderTransform>
                                        </Rectangle>
                                        <Rectangle x:Name="rectangle1" Fill="{TemplateBinding Foreground}" Height="2" Canvas.Left="3" RadiusY="0" RadiusX="0" Canvas.Top="11" Width="18" RenderTransformOrigin="0.5,0.5"   
      >
                                            <Rectangle.RenderTransform>
                                                <TransformGroup>
                                                    <ScaleTransform/>
                                                    <SkewTransform/>
                                                    <RotateTransform/>
                                                    <TranslateTransform/>
                                                </TransformGroup>
                                            </Rectangle.RenderTransform>
                                        </Rectangle>
                                        <Rectangle x:Name="rectangle2" Fill="{TemplateBinding Foreground}" Height="2" Canvas.Left="3" RadiusY="0" RadiusX="0" Canvas.Top="16" Width="18" RenderTransformOrigin="0.5,0.5"
      >
                                            <Rectangle.RenderTransform>
                                                <TransformGroup>
                                                    <ScaleTransform/>
                                                    <SkewTransform/>
                                                    <RotateTransform/>
                                                    <TranslateTransform/>
                                                </TransformGroup>
                                            </Rectangle.RenderTransform>
                                        </Rectangle>
                                    </Canvas>
                                </Viewbox>
                            </Border>
                            <!--<ControlTemplate.Triggers>
                                <Trigger Property="Button.IsDefaulted" Value="true"/>
                            </ControlTemplate.Triggers>-->
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </Page.Resources>

        <Grid Background="White">
            
            <SplitView x:Name="MySplitView"
                       IsPaneOpen="{Binding ElementName=MenuToggleButton, Path=IsChecked}">
                
                <SplitView.Pane>
                    <Grid>
                        <ToggleButton Style="{StaticResource MaterialDesignHamburgerToggleButton}" 
                                      HorizontalAlignment="Right" VerticalAlignment="Top" Margin="16"
                                      IsChecked="{Binding ElementName=MenuToggleButton, Path=IsChecked, Mode=TwoWay}" />
                    </Grid>
                </SplitView.Pane>
                
                <SplitView.Content>
                    <Grid>
                        <ToggleButton Style="{StaticResource MaterialDesignHamburgerToggleButton}" 
                                      IsChecked="False"
                                      VerticalAlignment="Top"
                                      x:Name="MenuToggleButton"/>
                    </Grid>
                </SplitView.Content>
            </SplitView>
        </Grid>

     How can i add this animation on drawer button which will also work when we swipe side drawer?

  6. Ivaylo Gergov
    Admin
    Ivaylo Gergov avatar
    661 posts

    Posted 30 Dec 2015 Link to this post

    Hi,

    The drawerbutton is a plain button, and while you could change the template of RadSideDrawer to use your custom togglebutton, the logic in the SideDrawer depends on the click event of the button.

    Regards,
    Ivaylo Gergov
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  7. Priom
    Priom avatar
    12 posts
    Member since:
    Jan 2014

    Posted 31 Dec 2015 in reply to Ivaylo Gergov Link to this post

    This type of addition would be great looking with telerik's awesome side drawer. A sample example providing togglebutton as side drawer button would be of great help
  8. Ivaylo Gergov
    Admin
    Ivaylo Gergov avatar
    661 posts

    Posted 06 Jan Link to this post

    Hello,

    Thanks for your valuable feedback. We will try to further improve our examples.

    Please, let me know should you have any other questions.

    Regards,
    Ivaylo Gergov
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top
DevCraft banner