Bread crumb template

3 posts, 0 answers
  1. miri
    miri avatar
    11 posts
    Member since:
    Apr 2015

    Posted 14 Jul 2015 Link to this post

    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. Peshito
    Admin
    Peshito avatar
    497 posts

    Posted 15 Jul 2015 Link to this post

    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
  3. UI for WPF is Visual Studio 2017 Ready
  4. miri
    miri avatar
    11 posts
    Member since:
    Apr 2015

    Posted 03 Aug 2015 in reply to Peshito Link to this post

       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>

Back to Top