This is a migrated thread and some comments may be shown as answers.

Bread crumb template

2 Answers 152 Views
BreadCrumb
This is a migrated thread and some comments may be shown as answers.
miri
Top achievements
Rank 1
miri asked on 14 Jul 2015, 10:05 AM

I have a bread-crumb, i make a control-template for this bread-crumb

(i do it automatic in the blend- "EditTemplate"->"Edit a copy")

the problem:

when i used this template my history pop-up is always empty, (the history in the model - correct, but on the view its empty!).

thenk you for helping!

 

the template code:

<ControlTemplate x:Key="RadBreadcrumbControlTemplate1" TargetType="{x:Type telerik:RadBreadcrumb}">
<Grid x:Name="outerGrid">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Grid.ColumnSpan="3"/>
<Image x:Name="image" Margin="5,0" Source="{Binding CurrentContainer.Image, RelativeSource={RelativeSource TemplatedParent}}">
<Image.Style>
<Style TargetType="{x:Type Image}">
<Setter Property="MaxHeight" Value="16"/>
<Setter Property="MaxWidth" Value="16"/>
</Style>
</Image.Style>
<Image.Visibility>
<Binding Path="IsCurrentIconVisible" RelativeSource="{RelativeSource TemplatedParent}">
<Binding.Converter>
<telerik:BooleanToVisibilityConverter/>
</Binding.Converter>
</Binding>
</Image.Visibility>
</Image>
<Breadcrumb:RadBreadcrumbBar x:Name="BreadcrumbBar" Grid.Column="1" Foreground="{TemplateBinding Foreground}" ItemTemplate="{TemplateBinding ItemTemplate}"/>
<telerik:RadSplitButton x:Name="historySplitButton" Grid.ColumnSpan="2" Grid.Column="1" InnerCornerRadius="0">
<telerik:RadSplitButton.DropDownContent>
<ListBox x:Name="HistoryListBox" BorderThickness="0" HorizontalContentAlignment="Stretch" Padding="2">
<ListBox.ItemContainerStyle>
<Style TargetType="{x:Type ListBoxItem}">
<Setter Property="Padding" Value="0"/>
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="VerticalContentAlignment" Value="Top"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListBoxItem}">
<Grid>
<ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" ContentStringFormat="{TemplateBinding ContentStringFormat}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListBox.ItemContainerStyle>
</ListBox>
</telerik:RadSplitButton.DropDownContent>
<telerik:RadSplitButton.Style>
<Style TargetType="{x:Type telerik:RadSplitButton}">
<Setter Property="IsTabStop" Value="False"/>
<Setter Property="IsOpen" Value="False"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Foreground" Value="Black"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Padding" Value="3"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type telerik:RadSplitButton}">
<Grid>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<telerik:RadToggleButton x:Name="DropDownPart" Grid.Column="1" IsTabStop="False" IsChecked="{Binding IsOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" InnerCornerRadius="0" Margin="0,-1,0,0" MinWidth="11" MinHeight="7" Grid.Row="2" Style="{TemplateBinding TogglePartStyle}" Visibility="{TemplateBinding DropDownIndicatorVisibility}"/>
<telerik:RadButton x:Name="ButtonPart" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Grid.Column="1" Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" InnerCornerRadius="0" Padding="{TemplateBinding Padding}" Grid.Row="1" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}">
<telerik:RadButton.Style>
<Style TargetType="{x:Type telerik:RadButton}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type telerik:RadButton}">
<ContentPresenter x:Name="Content" Grid.ColumnSpan="2" Content="{TemplateBinding Content}"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</telerik:RadButton.Style>
<telerik:RadButton.Visibility>
<Binding Mode="TwoWay" Path="IsButtonPartVisible" RelativeSource="{RelativeSource TemplatedParent}">
<Binding.Converter>
<telerik:BooleanToVisibilityConverter/>
</Binding.Converter>
</Binding>
</telerik:RadButton.Visibility>
</telerik:RadButton>
</Grid>
<Popup x:Name="DropDownPopup" AllowsTransparency="True" Focusable="False" IsOpen="{Binding IsOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" Placement="Bottom" StaysOpen="False">
<Grid>
<Border x:Name="DropDownPopupBorder" BorderBrush="#FF848484" BorderThickness="1" Background="White" CornerRadius="0" Height="{TemplateBinding DropDownHeight}" MaxWidth="{TemplateBinding DropDownMaxWidth}" MaxHeight="{TemplateBinding DropDownMaxHeight}" Margin="0" MinWidth="3" MinHeight="3" Width="{TemplateBinding DropDownWidth}">
<ContentPresenter x:Name="DropDownPopupContent" ContentTemplate="{TemplateBinding DropDownContentTemplate}" Content="{TemplateBinding DropDownContent}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
</Border>
</Grid>
</Popup>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="False"/>
<Trigger Property="IsOpen" Value="True">
<Setter Property="Panel.ZIndex" TargetName="DropDownPart" Value="1"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="True"/>
<Trigger Property="DropDownButtonPosition" Value="Right">
<Setter Property="Grid.Column" TargetName="DropDownPart" Value="2"/>
<Setter Property="Grid.Row" TargetName="DropDownPart" Value="1"/>
<Setter Property="Margin" TargetName="DropDownPart" Value="-1,0,0,0"/>
</Trigger>
<Trigger Property="IsButtonPartVisible" Value="False">
<Setter Property="Grid.Column" TargetName="DropDownPart" Value="0"/>
<Setter Property="Grid.ColumnSpan" TargetName="DropDownPart" Value="3"/>
<Setter Property="IsTabStop" TargetName="DropDownPart" Value="True"/>
</Trigger>
<Trigger Property="IsFocused" Value="True"/>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</telerik:RadSplitButton.Style>
<TextBox x:Name="pathTextBox" BorderThickness="0" Margin="1" MinHeight="20">
<telerik:StyleManager.Theme>
<telerik:Office_BlackTheme/>
</telerik:StyleManager.Theme>
</TextBox>
</telerik:RadSplitButton>
<Popup x:Name="AutocompletePopup" AllowsTransparency="True" Focusable="False" IsOpen="{Binding IsAutocompleteOpen, RelativeSource={RelativeSource TemplatedParent}}" Placement="Bottom" StaysOpen="False">
<ListBox x:Name="AutoCompleteListBox" BorderBrush="#FF848484" BorderThickness="1" MaxWidth="650" MaxHeight="500" MinWidth="100" MinHeight="30">
<ListBox.ItemContainerStyle>
<Style TargetType="{x:Type ListBoxItem}">
<Setter Property="Padding" Value="0"/>
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="VerticalContentAlignment" Value="Top"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListBoxItem}">
<Grid>
<ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" ContentStringFormat="{TemplateBinding ContentStringFormat}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListBox.ItemContainerStyle>
</ListBox>
</Popup>
<telerik:RadToggleButton x:Name="historyToggle" BorderBrush="Transparent" Background="Transparent" Grid.Column="3" Command="Breadcrumb:RadBreadcrumbCommands.HistoryDropDown" InnerCornerRadius="0" Width="15">
<Path x:Name="DropDownIndicator" Data="M0,0L5,0 5,1 4,1 4,2 3,2 3,3 2,3 2,2 1,2 1,1 0,1 0,0z" Fill="Black" HorizontalAlignment="Center" IsHitTestVisible="False" RenderTransformOrigin="0.5,0.5" SnapsToDevicePixels="True" VerticalAlignment="Center"/>
</telerik:RadToggleButton>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsTextMode" Value="True">
<Setter Property="Visibility" TargetName="historySplitButton" Value="Visible"/>
<Setter Property="Visibility" TargetName="BreadcrumbBar" Value="Collapsed"/>
<Setter Property="Visibility" TargetName="historyToggle" Value="Collapsed"/>
</Trigger>
<Trigger Property="IsTextMode" Value="False">
<Setter Property="Visibility" TargetName="historySplitButton" Value="Collapsed"/>
<Setter Property="Visibility" TargetName="BreadcrumbBar" Value="Visible"/>
<Setter Property="Visibility" TargetName="historyToggle" Value="Visible"/>
<Setter Property="IsChecked" TargetName="historyToggle" Value="False"/>
</Trigger>
<Trigger Property="IsAutocompleteOpen" Value="True">
<Setter Property="Panel.ZIndex" TargetName="historySplitButton" Value="1"/>
</Trigger>
<Trigger Property="IsTextModeEnabled" Value="False">
<Setter Property="Visibility" TargetName="historyToggle" Value="Collapsed"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>

2 Answers, 1 is accepted

Sort by
0
Peshito
Telerik team
answered on 15 Jul 2015, 11:31 AM
Hello,

I was able to reproduce this behavior and also found out what is the reason behind it. When template is extracted it seems that some properties are missing. Such properties are those having RelativeSource binding. Simply change your control template's part for <telerik:RadSplitButton.DropDownContent> as shown below:
<ListBox x:Name="HistoryListBox" BorderThickness="0"
     Background="White" ItemsSource="{TemplateBinding HistoryItems}"
SelectedItem="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=SelectedHistoryItem, Mode=TwoWay}"
     Foreground="{TemplateBinding Foreground}"
     FontSize="{TemplateBinding FontSize}"
     HorizontalContentAlignment="Stretch"
     MinHeight="28"
     Padding="3"
     VerticalContentAlignment="Stretch">
    <ListBox.ItemContainerStyle>
        <Style TargetType="{x:Type ListBoxItem}">
            <Setter Property="BorderThickness" Value="0"/>
            <Setter Property="Padding" Value="0"/>
            <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
            <Setter Property="VerticalContentAlignment" Value="Top"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ListBoxItem}">
                        <Grid x:Name="root">
                            <ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" ContentStringFormat="{TemplateBinding ContentStringFormat}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </ListBox.ItemContainerStyle>
</ListBox>
In case you need to use some specific theme's style you can see the control template for it by navigating to the desired theme folder (<your_installation_folder>\UI for WPF Q2 2015\Themes.Implicit\WPF40\OfficeBlack\Themes) and explore the appropriate xaml file. In this case that would be Telerik.Windows.Controls.Navigation.xaml.

Hope this helps.

Regards,
Peshito
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
miri
Top achievements
Rank 1
answered on 03 Aug 2015, 07:24 AM

   Thank you for the answer its work good, there is a same problem with the auto complate text box i fix it , see that i add a relativesource on the AutoCompleteListBox items source.

<Popup x:Name="AutocompletePopup" AllowsTransparency="True" Focusable="False" IsOpen="{Binding IsAutocompleteOpen, RelativeSource={RelativeSource TemplatedParent}}" Placement="Bottom" StaysOpen="False">
<ListBox x:Name="AutoCompleteListBox" ItemsSource="{ Binding RelativeSource={RelativeSource TemplatedParent},Path=AutoCompleteItems}" BorderBrush="#FF848484" BorderThickness="1" MaxWidth="650" MaxHeight="500" MinWidth="100" MinHeight="30">
<ListBox.ItemContainerStyle>
<Style TargetType="{x:Type ListBoxItem}">
<Setter Property="Padding" Value="0"/>
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="VerticalContentAlignment" Value="Top"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListBoxItem}">
<Grid>
<ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" ContentStringFormat="{TemplateBinding ContentStringFormat}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListBox.ItemContainerStyle>
</ListBox>
</Popup>

Tags
BreadCrumb
Asked by
miri
Top achievements
Rank 1
Answers by
Peshito
Telerik team
miri
Top achievements
Rank 1
Share this question
or