AI 助理
备案控制台
开发者社区 云原生 文章 正文

WPF Telerik TreeListView样式设计

2016-08-28 1061
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： Telerik控件 TreeListView 修改其中样式 1、添加TreeListView控件 View Code 通过模板选择器，选择相应的模板...

Telerik控件 TreeListView

修改其中样式

1、添加TreeListView控件

        <telerik:RadTreeView x:Name="ObjecTreeView" Padding="0,5,0.5,5" Grid.Row="1" BorderThickness="0" ScrollViewer.HorizontalScrollBarVisibility="Disabled"
telerik:StyleManager.Theme="Windows8" SelectionMode="Single" Background="White" SelectionChanged="ObjecTreeView_OnSelectionChanged"
SelectedValuePath="DisplayName" AutoScrollToSelectedItem="True" IsExpandOnSingleClickEnabled="True" FocusVisualStyle="{x:Null}" >
            <telerik:RadTreeView.ItemTemplateSelector>
                <styleSelector:ObjectTreeTemplateSelector ItemTemplate="{StaticResource ObjectItemTemplate}" 
TreeItemTemplate="{StaticResource ObjectTreeTemplate}"></styleSelector:ObjectTreeTemplateSelector>
            </telerik:RadTreeView.ItemTemplateSelector>
        </telerik:RadTreeView>
View Code

通过模板选择器，选择相应的模板

2、模板

1）级联模板

    <!--对象树母模板-->
    <HierarchicalDataTemplate x:Key="ObjectTreeTemplate"
ItemsSource="{Binding ObjectTypeModels}"
ItemTemplate="{StaticResource ObjectItemTemplate}" ItemContainerStyle="{StaticResource RadTreeViewItemStyle1}">
        <StackPanel Orientation="Horizontal">
            <Image Source="..\..\Images\操作图标\内容\文件夹.png" VerticalAlignment="Center" Height="14" Margin="0,0,5,0"/>
            <CheckBox x:Name="MotherCheckBox" Visibility="{Binding CheckBoxVisibility,Mode=TwoWay}"
IsChecked="{Binding IsChecked,Mode=TwoWay}" Click="ButtonBase_OnClick"></CheckBox>
            <TextBlock Text="{Binding DisplayName,Mode=TwoWay}" Margin="5,0,0,0" />
        </StackPanel>
    </HierarchicalDataTemplate>
View Code

2）子模板

    <!--对象树子模板-->
    <DataTemplate x:Key="ObjectItemTemplate">
        <ContentControl Content="{Binding}">
            <ContentControl.Style>
                <Style TargetType="ContentControl">
                    <Setter Property="ContentTemplate" Value="{StaticResource ObjectItemTemplateNoSelect}"></Setter>
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type telerik:RadTreeViewItem}}, Path=IsSelected}" Value="true">
                            <Setter Property="ContentTemplate" Value="{StaticResource ObjectItemTemplateSelected}"></Setter>
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </ContentControl.Style>
        </ContentControl>
    </DataTemplate>
View Code

选中样式

    <!--对象树选中状态子模板-->
    <DataTemplate x:Key="ObjectItemTemplateSelected">
        <StackPanel Orientation="Horizontal">
            <Image Source="..\..\Images\操作图标\内容\文件_Click.png" VerticalAlignment="Center" Height="14" Margin="0,0,5,0"/>
            <CheckBox x:Name="ChildCheckBox" Visibility="{Binding CheckBoxVisibility,Mode=TwoWay}" IsChecked="{Binding IsChecked,Mode=TwoWay}"></CheckBox>
            <TextBlock Text="{Binding DisplayName,Mode=TwoWay}" Foreground="#FFB83838" FontWeight="Black" Margin="5,0,0,0"/>
        </StackPanel>
    </DataTemplate>
View Code

未选中样式

    <!--对象树未选中状态子模板-->
    <DataTemplate x:Key="ObjectItemTemplateNoSelect">
        <StackPanel Orientation="Horizontal">
            <Image Source="..\..\Images\操作图标\内容\文件.png" VerticalAlignment="Center" Height="14" Margin="0,0,5,0"/>
            <CheckBox x:Name="ChildCheckBox" Visibility="{Binding CheckBoxVisibility,Mode=TwoWay}" IsChecked="{Binding IsChecked,Mode=TwoWay}"></CheckBox>
            <TextBlock Text="{Binding DisplayName,Mode=TwoWay}" Margin="5,0,0,0" />
        </StackPanel>
    </DataTemplate>
View Code

2、TreeListView的样式，设置子项的容器、焦点样式等。

    <!--模板的样式-->
    <Style x:Key="RadTreeViewItemStyle1" TargetType="{x:Type telerik:RadTreeViewItem}">
        <Setter Property="FocusVisualStyle">
            <Setter.Value>
                <Style>
                    <Setter Property="Control.Template">
                        <Setter.Value>
                            <ControlTemplate>
                                <Rectangle Margin="0" Stroke="Transparent" StrokeThickness="0"/>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </Setter.Value>
        </Setter>
        <Setter Property="HorizontalContentAlignment" Value="Left"/>
        <Setter Property="VerticalContentAlignment" Value="Center"/>
        <Setter Property="BorderThickness" Value="1"/>
        <Setter Property="Padding" Value="1,0,5,0"/>
        <Setter Property="IsDropAllowed" Value="True"/>
        <Setter Property="IsEnabled" Value="True"/>
        <Setter Property="MinHeight" Value="24"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type telerik:RadTreeViewItem}">
                    <Grid x:Name="RootElement">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition/>
                        </Grid.RowDefinitions>
                        <Grid x:Name="HeaderRow" Background="Transparent" MinHeight="{TemplateBinding MinHeight}">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition Width="*"/>
                            </Grid.ColumnDefinitions>
                            <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Grid.ColumnSpan="6" Grid.Column="2" CornerRadius="2"/>
                            <Border x:Name="MouseOverVisual" BorderThickness="0" Grid.ColumnSpan="6" Grid.Column="2" CornerRadius="1" Opacity="0">
                                <Border BorderBrush="White" BorderThickness="0" CornerRadius="0" Background="Transparent">
                                </Border>
                            </Border>
                            <Border x:Name="SelectionUnfocusedVisual" BorderThickness="0" Grid.ColumnSpan="6" Grid.Column="2" CornerRadius="1" Visibility="Collapsed">
                                <Border BorderBrush="Transparent" BorderThickness="0" CornerRadius="0" Background="LightGray">
                                </Border>
                            </Border>
                            <Border x:Name="SelectionVisual" BorderThickness="0" Grid.ColumnSpan="6" Grid.Column="2" CornerRadius="1" Visibility="Collapsed">
                                <Border BorderBrush="Transparent" BorderThickness="0" CornerRadius="0" Background="LightGray">
                                </Border>
                            </Border>
                            <StackPanel x:Name="IndentContainer" Orientation="Horizontal">
                                <Rectangle x:Name="IndentFirstVerticalLine" Stroke="#FFCCCCCC" Visibility="Collapsed" VerticalAlignment="Top" Width="1"/>
                            </StackPanel>
                            <Grid x:Name="ListRootContainer" Grid.Column="1" HorizontalAlignment="Center" MinWidth="20">
                                <Rectangle x:Name="HorizontalLine" HorizontalAlignment="Right" Height="1" Stroke="#FFCCCCCC" VerticalAlignment="Center"/>
                                <Rectangle x:Name="VerticalLine" HorizontalAlignment="Center" Stroke="#FFCCCCCC" VerticalAlignment="Top" Width="1"/>
                                <ToggleButton x:Name="Expander" Background="{TemplateBinding Background}" IsTabStop="False"/>
                                <Grid x:Name="LoadingVisual" HorizontalAlignment="Center" RenderTransformOrigin="0.5,0.5" Visibility="Collapsed" VerticalAlignment="Center">
                                    <Grid.RenderTransform>
                                        <TransformGroup>
                                            <RotateTransform Angle="0" CenterY="0.5" CenterX="0.5"/>
                                        </TransformGroup>
                                    </Grid.RenderTransform>
                                    <Path Data="M1,0A1,1,90,1,1,0,-1" Height="10" StrokeStartLineCap="Round" Stretch="Fill" Stroke="{TemplateBinding Foreground}" StrokeThickness="1" Width="10"/>
                                    <Path Data="M0,-1.1L0.1,-1 0,-0.9" Fill="{TemplateBinding Foreground}" HorizontalAlignment="Left" Height="4" Margin="5,-1.5,0,0" Stretch="Fill" StrokeThickness="1" VerticalAlignment="Top" Width="4"/>
                                </Grid>
                            </Grid>
                            <CheckBox x:Name="CheckBoxElement" Grid.Column="2" IsTabStop="False" Margin="5,0,0,0" Visibility="Collapsed" VerticalAlignment="Center">
                                <telerik:StyleManager.Theme>
                                    <telerik:Office_BlackTheme/>
                                </telerik:StyleManager.Theme>
                            </CheckBox>
                            <RadioButton x:Name="RadioButtonElement" Grid.Column="2" IsTabStop="False" Margin="5,0,0,0" Visibility="Collapsed" VerticalAlignment="Center">
                                <telerik:StyleManager.Theme>
                                    <telerik:Office_BlackTheme/>
                                </telerik:StyleManager.Theme>
                            </RadioButton>
                            <Image x:Name="Image" Grid.Column="3" HorizontalAlignment="Center" MaxWidth="16" MaxHeight="16" Margin="2" VerticalAlignment="Center"/>
                            <Rectangle x:Name="FocusVisual" Grid.ColumnSpan="6" Grid.Column="2" IsHitTestVisible="False" RadiusY="3" RadiusX="3" Stroke="Black" StrokeThickness="0" StrokeDashArray="1 2" Visibility="Collapsed"/>
                            <Grid Grid.ColumnSpan="2" Grid.Column="4">
                                <ContentPresenter x:Name="Header" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                                <ContentPresenter x:Name="EditHeaderElement" ContentTemplate="{TemplateBinding HeaderEditTemplate}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" Visibility="Collapsed" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                            </Grid>
                        </Grid>
                        <ItemsPresenter x:Name="ItemsHost" Grid.Row="1" Visibility="Collapsed"/>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsInEditMode" Value="True">
                            <Setter Property="Visibility" TargetName="Header" Value="Collapsed"/>
                            <Setter Property="Visibility" TargetName="EditHeaderElement" Value="Visible"/>
                        </Trigger>
                        <Trigger Property="IsSelected" Value="True">
                            <Setter Property="Visibility" TargetName="SelectionVisual" Value="Visible"/>
                        </Trigger>
                        <Trigger Property="IsFocused" Value="True">
                            <Setter Property="Visibility" TargetName="FocusVisual" Value="Visible"/>
                        </Trigger>
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="IsSelected" Value="True"/>
                                <Condition Property="IsSelectionActive" Value="False"/>
                            </MultiTrigger.Conditions>
                            <Setter Property="Opacity" TargetName="SelectionVisual" Value="0"/>
                            <Setter Property="Visibility" TargetName="SelectionUnfocusedVisual" Value="Visible"/>
                        </MultiTrigger>
                        <Trigger Property="IsEnabled" Value="False">
                            <Setter Property="Opacity" TargetName="Header" Value="0.5"/>
                        </Trigger>
                        <Trigger Property="IsExpanded" Value="True">
                            <Setter Property="Visibility" TargetName="ItemsHost" Value="Visible"/>
                        </Trigger>
                        <Trigger Property="IsLoadingOnDemand" Value="True">
                            <Trigger.EnterActions>
                                <BeginStoryboard x:Name="LoadingVisualTransform">
                                    <Storyboard>
                                        <DoubleAnimation Duration="0:0:1" From="0" RepeatBehavior="Forever" To="359" Storyboard.TargetProperty="Angle" Storyboard.TargetName="LoadingVisualAngleTransform"/>
                                    </Storyboard>
                                </BeginStoryboard>
                            </Trigger.EnterActions>
                            <Trigger.ExitActions>
                                <StopStoryboard BeginStoryboardName="LoadingVisualTransform"/>
                            </Trigger.ExitActions>
                            <Setter Property="Visibility" TargetName="LoadingVisual" Value="Visible"/>
                            <Setter Property="Visibility" TargetName="Expander" Value="Collapsed"/>
                        </Trigger>
                        <Trigger Property="IsDragOver" Value="True">
                            <Setter Property="Opacity" TargetName="MouseOverVisual" Value="1"/>
                        </Trigger>
                        <Trigger Property="IsMouseOver" SourceName="HeaderRow" Value="True">
                            <Setter Property="Opacity" TargetName="MouseOverVisual" Value="1"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="ItemsPanel">
            <Setter.Value>
                <ItemsPanelTemplate>
                    <telerik:TreeViewPanel IsItemsHost="True" IsVisualCacheEnabled="False" VerticalAlignment="Bottom"/>
                </ItemsPanelTemplate>
            </Setter.Value>
        </Setter>
    </Style>
View Code

 

本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须在文章页面给出原文连接，否则保留追究法律责任的权利。
文章标签：
C#
容器
关键词：
wpf样式
wpf设计
@winter
目录
相关文章
关关长语
|
C#
WPF疑难问题之Treeview中HierarchicalDataTemplate多级样式
WPF疑难问题之Treeview中HierarchicalDataTemplate多级样式
关关长语
336 0
土木林森
|
3月前
|
开发者 C# 存储
WPF开发者必读：资源字典应用秘籍，轻松实现样式与模板共享，让你的WPF应用更上一层楼！
【8月更文挑战第31天】在WPF开发中，资源字典是一种强大的工具，用于共享样式、模板、图像等资源，提高了应用的可维护性和可扩展性。本文介绍了资源字典的基础知识、创建方法及最佳实践，并通过示例展示了如何在项目中有效利用资源字典，实现资源的重用和动态绑定。
土木林森
66 0
土木林森
|
3月前
|
开发者 C# 存储
WPF开发者必读：样式与模板的艺术，轻松定制UI外观，让你的应用程序更上一层楼！
【8月更文挑战第31天】在WPF应用开发中，样式与模板是实现美观界面与一致性的关键工具。样式定义了控件如字体、颜色等属性，而模板则允许自定义控件布局与子控件，两者均可存储于`.xaml`文件中。本文介绍了样式与模板的基础知识，通过示例展示了如何创建并应用它们来改变按钮的外观，从而提升用户体验。
土木林森
62 0
杰克.陈
|
C# 数据安全/隐私保护
【WPF】右下角弹出自定义通知样式（Notification）——简单教程
原文:【WPF】右下角弹出自定义通知样式（Notification）——简单教程 1.先看效果 2.实现 1.主界面是MainWindow 上面就只摆放一个Button即可。
杰克.陈
3043 0
mingupup
|
3月前
|
存储 前端开发 C#
WPF/C#:更改界面的样式
WPF/C#:更改界面的样式
mingupup
41 0
关关长语
WPF-布局样式练习-Day02-聊天气泡
WPF-布局样式练习-Day02-聊天气泡
关关长语
235 1
老码识途
|
6月前
|
C#
浅谈WPF之样式与资源
WPF通过样式，不仅可以方便的设置控件元素的展示方式，给用户呈现多样化的体验，还简化配置，避免重复设置元素的属性，以达到节约成本，提高工作效率的目的，样式也是资源的一种表现形式。本文以一个简单的小例子，简述如何设置WPF的样式以及资源的应用，仅供学习分享使用，如有不足之处，还请指正。
老码识途
115 0
关关长语
|
C#
WPF-Binding问题-模板样式使用Binding TemplatedParent与TemplateBinding区别
WPF-Binding问题-模板样式使用Binding TemplatedParent与TemplateBinding区别
关关长语
203 0
关关长语
WPF-样式问题-处理ListBox、ListView子项内容全填充问题
WPF-样式问题-处理ListBox、ListView子项内容全填充问题
关关长语
219 0
关关长语
|
C#
WPF-布局样式练习-Day01
WPF-布局样式练习-Day01
关关长语
122 0