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内容就可以，有待日后更新.