首页 > 代码库 > 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>
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

 

WPF Telerik TreeListView样式设计