wpf treeview 之 整行選中 效果


wpf 原生的 treeview 選中效果只能選中contentpresenter部分 如圖:

image 

要實現的效果如圖:

image

主要的點在於

1.treeviewitem的 模板結構修改達到 統一背景顏色和填充長度

2.處理由於子節點的向右偏移造成的 背景色填充不夠,如圖:

image

這種情況就是由於 模板中的ItemsPresenter 在布局中第二列造成的,由於item包含的item 初始位置就在於頂級的第二列所以 一次會偏移一個第一列寬度。

解決:

百度了一下 ,發現一篇帖子講如何實現,主要原理是在布局中取消掉層級間的縮進,來實現每一級的背景色都可以填充到最左邊,然后通過代碼記錄item的級別然后計算偏移,偏移項目。但是我覺得這樣太麻煩了 所以就寫了一個取巧的純xaml的方式。上代碼

<Style TargetType="{x:Type TreeViewItem}">
            <Setter Property="Foreground" Value="#FFF0F0F0"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type TreeViewItem}">
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition  Width="16"/>
                                <ColumnDefinition/>
                            </Grid.ColumnDefinitions>
                            <Grid.RowDefinitions>
                                <RowDefinition/>
                                <RowDefinition/>
                            </Grid.RowDefinitions>
                            <Border Grid.ColumnSpan="2" Margin="-1600,0,0,0"  x:Name="Bd" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}"  SnapsToDevicePixels="true"/>
                            <ToggleButton  x:Name="Expander" ClickMode="Press" IsChecked="{Binding IsExpanded, RelativeSource={RelativeSource TemplatedParent}}" Style="{StaticResource ExpandCollapseToggleStyle}"/>
                            <ContentPresenter Grid.Column="1" x:Name="PART_Header" ContentSource="Header" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/> 
                            <ItemsPresenter  x:Name="ItemsHost" Grid.ColumnSpan="2" Grid.Column="1" Grid.Row="1"/>
                         
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsExpanded" Value="false">
                                <Setter Property="Visibility" TargetName="ItemsHost" Value="Collapsed"/>
                            </Trigger>
                            <Trigger Property="HasItems" Value="false">
                                <Setter Property="Visibility" TargetName="Expander" Value="Hidden"/>
                            </Trigger>
                            <Trigger Property="IsSelected" Value="true">
                                <Setter Property="Background" TargetName="Bd" Value="#FF404040" />
                              
                                <Setter Property="Background" TargetName="Expander" Value="#FF404040"/>
                            </Trigger>
                            <MultiTrigger>
                                <MultiTrigger.Conditions>
                                    <Condition Property="IsSelected" Value="true"/>
                                    <Condition Property="IsSelectionActive" Value="false"/>
                                </MultiTrigger.Conditions>
                                <Setter Property="Background" TargetName="Bd" Value="#FF404040"/>
                              
                                <Setter Property="Background" TargetName="Expander" Value="#FF404040"/>
                            </MultiTrigger>
                            <Trigger Property="IsEnabled" Value="false">
                                <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

微笑 既簡單 又實用 ,但是還是需要建立在搞清楚布局的基礎上,當然如果超過了 100級父子關系(16*100 )長度 就會有問題了,不過一般不會有100級那么長吧=。。=


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM