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

来源：互联网发布：windows 10 修复bcd 编辑：程序博客网时间：2024/05/21 10:00

把第三方控件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内容就可以，有待日后更新.

0 0