WPF第三方控件DXperience的dxn:NavBarControl添加样式

把第三方控件DXNavBar修改成这效果

主程序的代码如下：

... ...
<dxn:NavBarControl HorizontalAlignment="Stretch" Margin="-1" Name="DXNavBar" DockPanel.Dock="Top" >
<dxn:NavBarControl.Resources>
<ResourceDictionary Source="StyleFiles/DXNavBarStyle.xaml" />   //引用的样式文件
</dxn:NavBarControl.Resources>
<dxn:NavBarGroup Name="SysSaveGroup" ImageSource="/Assets/images/acSysSaveIcon.png">
<dxn:NavBarItem Content="子系统配置" Name="ChildSysConfig" />
<dxn:NavBarItem Content="机构设置" Name="JiGouConfig" />
<dxn:NavBarItem Content="用户管理" Name="UserManager" />
<dxn:NavBarItem Content="功能角色" Name="GNJSe" />
....
</dxn:NavBarGroup>

<dxn:NavBarGroup Name="RunCheckGroup" ImageSource="assets/images/acRunCheckIcon.png" />

<dxn:NavBarGroup Name="SpacerDataConfigGroup" ImageSource="assets/images/acSpacerConfigIcon.png" />

<dxn:NavBarGroup Name="DireManagerGroup" ImageSource="assets/images/acDirectoryManagerIcon.png" />

<dxn:NavBarGroup Name="DataDictionaryGroup" ImageSource="assets/images/acDataDictionaryIcon.png" />

<dxn:NavBarGroup Name="ServerConfig" ImageSource="assets/images/acServerConfigIcon.png" />

</dxn:NavBarControl>
... ...

<dxn:NavBarGroup Header="阿里巴巴" ImageSource="{图片路径}" />

注：<dxn:NavBarGroup 中的Header与ImageSource属性是跟样式文件中的<DataTemplate x:Key="

{dxnt:CommonElementsThemeKey ResourceKey=HeaderTemplate}"> ... </DataTemplate> 内容有关的

<dxn:NavBarItem Content="巴豆" ImageSource="{Item图片路径}"/>

注：<DataTemplate x:Key="{dxnt:CommonElementsThemeKey ResourceKey=ItemContentTemplate}"> ... </DataTemplate>

控制Item内容，DockingLeftContentMargin文字的位置，DockingLeftImageMargin图片的位置，对应的还有DockingTopContentMargin,

DockingBottomContentMargin, DockingRightContentMargin，其实用一个DockingLeftContentMargin方向就行了。

主程序.CS后台代码如下：

public DXNavBarComp()
{
InitializeComponent();
DXNavBar.View = new SideBarView();
}

-----------------------------------------------------------

样式文件DXNavBarStyle.xaml代码：

</ResourceDictionary ... >
<!-- 设置Header的背景色或图 -->
<ControlTemplate x:Key="{dxnt:CommonElementsThemeKey ResourceKey=GroupHeaderTemplate}"
TargetType="dxn:NavBarGroupHeader">
<Border x:Name="HeaderBorder" BorderBrush="#FFFFFFFF" BorderThickness="0" Height="37" Width="227">
<Border.Background>
<ImageBrush ImageSource="/Assets/images/navBarDefaulted.png" Stretch="Uniform" />
</Border.Background>

<dxn:ImageAndTextContentPresenter x:Name="groupHeaderLabel"
ImageFallbackSize="100" Content="{Binding}"
Style="{DynamicResource {dxnt:NavBarGroupControlThemeKey ResourceKey=HeaderStyle}}"
Foreground="{Binding Path=Foreground, RelativeSource={RelativeSource TemplatedParent}}"
/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Background" TargetName="HeaderBorder" >
<Setter.Value>
<ImageBrush ImageSource="/Assets/images/navBarSelected.png" Stretch="Uniform" />
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Cursor" Value="Hand" />
<Setter Property="Background" TargetName="HeaderBorder" >
<Setter.Value>
<ImageBrush ImageSource="/Assets/images/navBarSelected.png" Stretch="Uniform" />
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>

<DataTemplate x:Key="{dxnt:CommonElementsThemeKey ResourceKey=HeaderTemplate}">
<DockPanel Margin="0" >
<!-- 设置Header的标题样式,即是设计页中dxn:NavBarGroup的ImageSource -->
<Image x:Name="image" Source="{Binding Path=ImageSource}" DockPanel.Dock="Left" Height="37" Width="227"/>
<!-- dxn:NavBarGroup里的Header属性跟这个TextBlock捆绑,因为直接用图片，所以注释掉TextBlock -->
<!--<TextBlock Text="{Binding Path=Header}" Foreground="Green" VerticalAlignment="Center" Margin="4,0,0,0"/>-->
</DockPanel>

<DataTemplate.Triggers>
<DataTrigger Binding="{Binding Path=ImageSource}" Value="{x:Null}">
<Setter Property="Visibility" Value="Collapsed" TargetName="image"/>
</DataTrigger>
</DataTemplate.Triggers>
</DataTemplate>

<!-- DockingLeftContentMargin文字的位置，DockingLeftImageMargin图片的，对应的还有Top,Botton,Right-->
<DataTemplate x:Key="{dxnt:CommonElementsThemeKey ResourceKey=ItemContentTemplate}">
<dxn:ImageAndTextDecorator x:Name="itemContent"
ImageFallbackSize="16" DisplayModeImageMargin="3"
DockingLeftContentMargin="70,3,3,3" DisplayModeTextMargin="3"
ImageDocking="{Binding Path=(dxn:NavBarViewBase.LayoutSettings).ImageDocking, RelativeSource={RelativeSource TemplatedParent}}"
ImageSource="{Binding Path=ImageSource}" ImageStyle="{DynamicResource {dxnt:NavBarItemControlThemeKey ResourceKey=ItemImageStyle}}"
ContentSource="{Binding Path=Content}"
ContentStyle="{DynamicResource {dxnt:NavBarItemControlThemeKey ResourceKey=ItemTextStyle}}" />
</DataTemplate>

<!-- Item内容的选择样式MouseOver,Selected-->
<ControlTemplate x:Key="{dxnt:CommonElementsThemeKey ResourceKey=ItemTemplate}" TargetType="{x:Type dxn:NavBarItemControl}">
<Grid x:Name="grid" Margin="0" Width="218" Height="30" >
<Grid.Background>
<ImageBrush ImageSource="/Assets/images/ListBoxDefaulted.png" Stretch="Uniform" />
</Grid.Background>

<ContentPresenter x:Name="item" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Background" TargetName="grid">
<Setter.Value>
<ImageBrush ImageSource="/Assets/images/ListBoxSelected.png" Stretch="Uniform" />
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" TargetName="grid">
<Setter.Value>
<ImageBrush ImageSource="/Assets/images/ListBoxSelected.png" Stretch="Uniform" />
</Setter.Value>
</Setter>
</Trigger>
<!--item selected background-->
<DataTrigger Binding="{Binding Path=IsSelected}" Value="true">
<Setter Property="Background" TargetName="grid">
<Setter.Value>
<ImageBrush ImageSource="/Assets/images/ListBoxSelected.png" Stretch="Uniform" />
</Setter.Value>
</Setter>
</DataTrigger>
<DataTrigger Binding="{Binding Path=IsEnabled}" Value="false">
<Setter Property="Opacity" Value="0.5"/>
</DataTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>

<!-- 可能是作用于滚动条，暂不清楚 -->
<ControlTemplate x:Key="{dxnt:CommonElementsThemeKey ResourceKey=SmoothScrollTemplate}"
TargetType="ContentControl">
<dxn:GroupScrollableContentControl x:Name="scrollableContent"
Orientation="{Binding Path=NavBar.View.ItemsPanelOrientation}"
dx:FocusHelper2.Focusable="False">
<dxn:GroupScrollableContentControl.AllowScrolling>
<Binding Path="NavBar.View.NavBarViewKind">
<Binding.Converter>
<dxn:NavBarViewKindToBooleanConverter/>
</Binding.Converter>
</Binding>
</dxn:GroupScrollableContentControl.AllowScrolling>
<ContentPresenter/>
</dxn:GroupScrollableContentControl>
</ControlTemplate>

<!-- 针对边框Items列表的边框；当内容过多时出现的滚动条 -->
<ControlTemplate x:Key="{dxnt:CommonElementsThemeKey ResourceKey=GroupItemsContainerTemplate}"
TargetType="dxn:GroupItemsContainer">
<Grid>
<dx:LayoutTransformPanel Orientation="{Binding Path=NavBar.View.Orientation}">
<Border x:Name="border" Background="Transparent" BorderBrush="#990000" BorderThickness="2" Padding="0">
<Border HorizontalAlignment="Stretch" x:Name="border2" Width="Auto" Height="Auto"
Background="#FFFFFFFF" BorderThickness="0"/>
</Border>
</dx:LayoutTransformPanel>
<dxn:ScrollControl x:Name="scrollControl"
ScrollButtonsControlTemplate="{DynamicResource {dxnt:CommonElementsThemeKey ResourceKey=SmoothScrollTemplate}}"
ScrollBarControlTemplate="{DynamicResource {dxnt:CommonElementsThemeKey ResourceKey=NormalScrollTemplate}}"
dx:FocusHelper2.Focusable="False">
<dx:LayoutTransformPanel Orientation="{Binding Path=NavBar.View.Orientation}">
<ContentPresenter x:Name="content" Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}" Margin="0" />
<!-- 影响Item整个框内容的布局 -->
</dx:LayoutTransformPanel>
</dxn:ScrollControl>
</Grid>
</ControlTemplate>

<!-- ScrollUpButtonTemplate 是整个NavBar滚动按钮 (在SideBarView模式没啥用，略)-->

<!-- ScrollUpGroupButtonTemplate 是ItemGroup内的滚动按钮-->
<ControlTemplate x:Key="{dxnt:CommonElementsThemeKey ResourceKey=ScrollUpGroupButtonTemplate}"
TargetType="{x:Type RepeatButton}">
<Border x:Name="border" Background="LightGray" BorderBrush="#FFFFFFFF" BorderThickness="0,0,0,0" Margin="0">
<Path Stretch="Fill" Fill="Black" Data="F1 M 1257,761L 1258,761L 1262,766L 1253,766L 1257,761 Z "
Width="9" Height="5" Margin="0,2,0,2" x:Name="path"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Opacity" Value="0.25" TargetName="path"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="Gray" TargetName="border"/>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Background" Value="Gray" TargetName="border"/>
<Setter Property="Fill" Value="#FFD4DFF0" TargetName="path"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>

<ControlTemplate x:Key="{dxnt:CommonElementsThemeKey ResourceKey=ScrollDownGroupButtonTemplate}"
TargetType="{x:Type RepeatButton}">
<Border x:Name="border" Background="LightGray" BorderBrush="#FFFFFF" BorderThickness="0,0,0,0" Margin="0">
<Path Stretch="Fill" Fill="Black" Data="F1 M 1263,769L 1262,769L 1258,764L 1267,764L 1263,769 Z "
Margin="0,2,0,2" Width="9" Height="5" x:Name="path"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Opacity" Value="0.25" TargetName="path"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="Gray" TargetName="border"/>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Background" Value="Gray" TargetName="border"/>
<Setter Property="Fill" Value="#FFD4DFF0" TargetName="path"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</ResourceDictionary>

注：暂时还没找到当Header被选择时，触发选择效果，目前只有IsMouseOver,IsPressed响应，但是item内容就可以，有待日后更新.