Template problem

Hello,

I'm trying add new items above the ToggleButton of NavigationDrawer Control but when I extract control's Template that NavigationItems and Footer are not shown.

<ControlTemplate x:Key="SfNavigationDrawerControlTemplate1" TargetType="{x:Type syncfusion:SfNavigationDrawer}">
            <Grid
                x:Name="NavigationDrawerMainGrid"
                Background="{TemplateBinding Background}"
                ClipToBounds="True">
                <ContentPresenter
                    x:Name="ContentViewContentPresenter"
                    Content="{Binding ContentView, RelativeSource={RelativeSource TemplatedParent}}"
                    Focusable="False" />
                <Grid
                    x:Name="NavigationDrawerTransparentViewGrid"
                    Background="Transparent"
                    Focusable="False"
                    Visibility="Collapsed" />
                <Grid
                    x:Name="DrawerContentGrid"
                    Width="{Binding CompactModeWidth, RelativeSource={RelativeSource TemplatedParent}}"
                    HorizontalAlignment="Left"
                    Background="{Binding DrawerBackground, RelativeSource={RelativeSource TemplatedParent}}">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="*" />
                        <RowDefinition Height="Auto" />
                    </Grid.RowDefinitions>
                    <Grid x:Name="NavigationDrawerHeaderView" Background="{Binding DrawerBackground, RelativeSource={RelativeSource TemplatedParent}}">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto" />
                            <ColumnDefinition Width="*" />
                        </Grid.ColumnDefinitions>
                        <ToggleButton
                            x:Name="HamburgurButton"
                            Width="{Binding CompactModeWidth, RelativeSource={RelativeSource TemplatedParent}}"
                            Height="35"
                            HorizontalAlignment="Left"
                            VerticalAlignment="Stretch"
                            Background="Transparent"
                            BorderBrush="Transparent"
                            ContentTemplate="{Binding ToggleButtonIconTemplate, RelativeSource={RelativeSource TemplatedParent}}"
                            IsChecked="{Binding IsOpen, RelativeSource={RelativeSource TemplatedParent}}">
                            <ToggleButton.Style>
                                <Style TargetType="{x:Type ToggleButton}">
                                    <Setter Property="Background" Value="Transparent" />
                                    <Setter Property="Template">
                                        <Setter.Value>
                                            <ControlTemplate TargetType="{x:Type ToggleButton}">
                                                <Border x:Name="HamburgurButtonBorder" Background="{TemplateBinding Background}">
                                                    <ContentPresenter
                                                        HorizontalAlignment="Center"
                                                        VerticalAlignment="Center"
                                                        Content="{TemplateBinding Content}"
                                                        ContentStringFormat="{TemplateBinding ContentStringFormat}"
                                                        ContentTemplate="{TemplateBinding ContentTemplate}" />
                                                </Border>
                                                <ControlTemplate.Triggers>
                                                    <Trigger Property="IsMouseOver" Value="True">
                                                        <Setter TargetName="HamburgurButtonBorder" Property="Background" Value="#FFCBCBCB" />
                                                        <Setter TargetName="HamburgurButtonBorder" Property="BorderBrush" Value="#FFCBCBCB" />
                                                    </Trigger>
                                                    <Trigger Property="IsChecked" Value="True">
                                                        <Setter TargetName="HamburgurButtonBorder" Property="Background" Value="#FFC4C4C4" />
                                                        <Setter TargetName="HamburgurButtonBorder" Property="BorderBrush" Value="#FFC4C4C4" />
                                                    </Trigger>
                                                </ControlTemplate.Triggers>
                                            </ControlTemplate>
                                        </Setter.Value>
                                    </Setter>
                                </Style>
                            </ToggleButton.Style>
                            <ToggleButton.Visibility>
                                <Binding Path="IsToggleButtonVisible" RelativeSource="{RelativeSource TemplatedParent}">
                                    <Binding.Converter>
                                        <BooleanToVisibilityConverter />
                                    </Binding.Converter>
                                </Binding>
                            </ToggleButton.Visibility>
                            <Grid>
                                <Path
                                    Width="16"
                                    Height="11"
                                    HorizontalAlignment="Center"
                                    VerticalAlignment="Center"
                                    Data="M0.5,10L15.5,10C15.776,10 16,10.224 16,10.5 16,10.776 15.776,11 15.5,11L0.5,11C0.22400001,11 0,10.776 0,10.5 0,10.224 0.22400001,10 0.5,10z M0.5,5L15.5,5C15.776001,5 16,5.223999 16,5.5 16,5.776001 15.776001,6 15.5,6L0.5,6C0.22399902,6 0,5.776001 0,5.5 0,5.223999 0.22399902,5 0.5,5z M0.5,0L15.5,0C15.776,0 16,0.22399998 16,0.5 16,0.77600002 15.776,1 15.5,1L0.5,1C0.22400001,1 0,0.77600002 0,0.5 0,0.22399998 0.22400001,0 0.5,0z"
                                    Fill="Black"
                                    Stretch="Fill">
                                    <Path.Visibility>
                                        <Binding
                                            ConverterParameter="Path"
                                            Path="ToggleButtonIconTemplate"
                                            RelativeSource="{RelativeSource TemplatedParent}">
                                            <Binding.Converter>
                                                <syncfusion:ObjectNullToVisibilityConverter />
                                            </Binding.Converter>
                                        </Binding>
                                    </Path.Visibility>
                                </Path>
                            </Grid>
                        </ToggleButton>
                        <ContentControl Grid.Column="1" ContentTemplate="{Binding ToggleButtonContentTemplate, RelativeSource={RelativeSource TemplatedParent}}" />
                    </Grid>
                    <Grid x:Name="NavigationDrawerContentView" Grid.Row="1">
                        <ScrollViewer VerticalScrollBarVisibility="Auto">
                            <syncfusion:NavigationView
                                x:Name="DrawerContent"
                                HorizontalAlignment="Stretch"
                                Background="{Binding DrawerBackground, RelativeSource={RelativeSource TemplatedParent}}"
                                BorderThickness="0"
                                Focusable="False"
                                IsTabStop="False"


                                ItemContainerStyle="{Binding ItemContainerStyle, RelativeSource={RelativeSource TemplatedParent}}"
                                ItemTemplate="{Binding ItemTemplate, RelativeSource={RelativeSource TemplatedParent}}"
                                ScrollViewer.HorizontalScrollBarVisibility="Disabled" />
                        </ScrollViewer>
                    </Grid>
                    <Grid
                        x:Name="NavigationDrawerFooterView"
                        Grid.Row="2"
                        Background="{Binding DrawerBackground, RelativeSource={RelativeSource TemplatedParent}}">
                        <syncfusion:NavigationView Focusable="False" />
                    </Grid>
                </Grid>
            </Grid>
        </ControlTemplate>




3 Replies

SS Suganya Sethuraman Syncfusion Team October 8, 2021 07:00 AM UTC

Hi David,

Greetings from Syncfusion.

We have analyzed your requirement. We have achieved your requirement by editing SfNavigationDrawer style.

Please have a sample for your reference,

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/SfNavigationDrawerTemplate-1925356695

Please check if the sample satisfies your requirement and let us know if you have any concerns.

Regards,
Suganya Sethuraman.                         
 



DA David replied to Suganya Sethuraman October 8, 2021 02:58 PM UTC

It's works. Thank you.



SS Suganya Sethuraman Syncfusion Team October 11, 2021 05:50 AM UTC

Hi David,

Thanks for the update.

We are glad that your issue is resolved. Please let us know if you require any further assistance.

Regards,
Suganya Sethuraman.
 


Loader.
Up arrow icon