Telerik Forums / UI for Universal Windows Platform
This is a migrated thread and some comments may be shown as answers.

Drawer button styling

6 Answers 272 Views
SideDrawer
This is a migrated thread and some comments may be shown as answers.
Priom
Top achievements
Rank 1
Priom asked on 05 Dec 2015, 05:10 AM
I want to change the default drawer button. Please provide a sample code for DrawerButtonStyle.

6 Answers, 1 is accepted

Sort by
0
Ivaylo Gergov
Telerik team
answered on 09 Dec 2015, 03:16 PM
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
0
Priom
Top achievements
Rank 1
answered on 27 Dec 2015, 04:04 PM
Thanks for your help but i am not happy with the default positioning of drawer button. Please provide a sample application.
0
Priom
Top achievements
Rank 1
answered on 27 Dec 2015, 04:53 PM

<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?

0
Ivaylo Gergov
Telerik team
answered on 30 Dec 2015, 10:04 AM
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
0
Priom
Top achievements
Rank 1
answered on 31 Dec 2015, 07:00 PM
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
0
Ivaylo Gergov
Telerik team
answered on 06 Jan 2016, 07:17 AM
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
Tags
SideDrawer
Asked by
Priom
Top achievements
Rank 1
Answers by
Ivaylo Gergov
Telerik team
Priom
Top achievements
Rank 1
Share this question
or