首页 > 代码库 > WPF Telerik TreeListView样式设计
WPF Telerik TreeListView样式设计
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>
通过模板选择器,选择相应的模板
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>
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>
选中样式
<!--对象树选中状态子模板--> <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>
未选中样式
<!--对象树未选中状态子模板--> <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>
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>
WPF Telerik TreeListView样式设计
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。