Breadcrumb Styling - Navigation for WPF Forum

Posted 14 years ago by Christian G. Dietz

Version: 9.1.0505

I'm currently looking at purchasing the Navigation product and was playing around with the code. We'd like to style the control such that the breadcrumb text is white and the background Black, and make the button background never show up. I haven't been able to style the underlying PopupButtons at all. Is there a way to make them remain transparent, even when clicked? Is there a way to color the drop down arrow something other than black (so that the arrows are visible on a black background)?

Thanks,
Chris

//Example Styles Below

<DataTemplate x:Key="CommonDataBreadcrumbItemTemplate">
<TextBlock Text="{Binding Path=ExplorerName}"
TextTrimming="CharacterEllipsis"
VerticalAlignment="Center" Foreground="White" />
</DataTemplate>

<DataTemplate x:Key="CommonDataMenuItemNormalTemplate">
<TextBlock Margin="2,0,0,0"
Text="{Binding Path=ExplorerName}"/>
</DataTemplate>

<DataTemplate x:Key="CommonDataMenuItemExpandedTemplate">
<TextBlock Margin="2,0,0,0"
Text="{Binding Path=ExplorerName}"
FontWeight="Bold" />
</DataTemplate>

<Style x:Key="CommonDataBreadcrumbItemStyle"
TargetType="{x:Type navigation:BreadcrumbItem}">

</Style>

<Style x:Key="CommonDataMenuItemContainerStyle"
TargetType="{x:Type MenuItem}">
<Setter Property="Background" Value="Black"></Setter>
<Setter Property="Foreground" Value="White"></Setter>
</Style>

<Style x:Key="DirectoryDataBreadcrumbItemStyle"
TargetType="{x:Type navigation:BreadcrumbItem}"
BasedOn="{StaticResource CommonDataBreadcrumbItemStyle}">
<Setter Property="ItemsSource"
Value="{Binding Path=NavigableChildren}" />
<Setter Property="Foreground" Value="White"></Setter>
</Style>

...

<Grid Name="navBar" VerticalAlignment="Top" HorizontalAlignment="Stretch" Height="35">

<navigation:Breadcrumb Name="breadcrumb" Background="Black" IsEditable="False" Foreground="White" RootItem="{Binding}"
ItemTemplate="{StaticResource CommonDataBreadcrumbItemTemplate}"
MenuItemTemplate="{StaticResource CommonDataMenuItemNormalTemplate}"
MenuItemContainerStyle="{StaticResource CommonDataMenuItemContainerStyle}"
MenuItemExpandedTemplate="{StaticResource CommonDataMenuItemExpandedTemplate}"
ItemContainerStyle="{StaticResource DirectoryDataBreadcrumbItemStyle}" AutoMinimizeItemCount="0" BorderThickness="0">

</navigation:Breadcrumb>
</Grid>

Comments (1)

Posted 14 years ago by Actipro Software Support - Cleveland, OH, USA

Hi Christian,

The Breadcrumb uses two types of buttons, BreadcrumbItemNavigateButton and BreadcrumbOverflowButton, both of which derive from PopupButton from our Shared Library. We don't currently have an option to make the popup button always transparent, but you could very easily create a new control template that supported that.

We'd be happy to provide the default Styles for any products you purchase, and we already provide a download link for owners of WPF Studio. Using these Styles, you could copy the existing control template and simply cut the parts that render as non-transparent.

Then you'd create an implicit Style that sets the properties you would like to change, including the control template. For example, the implicit Style below will change the arrow color on the navigate buttons, and a similiar Style for the overflow button.

<Style x:Key="{x:Type navigation:BreadcrumbItemNavigateButton}"
        TargetType="{x:Type navigation:BreadcrumbItemNavigateButton}">
    <Setter Property="Foreground" Value="White" />
</Style>

Actipro Software Support

The latest build of this product (v24.1.2) was released 1 days ago, which was after the last post in this thread.

Add Comment

Please log in to a validated account to post comments.