TreeViewItem.Header مع الشبكة داخل

Question

وأنا أحاول أن جعل "yourcolor.net و" تظهر في نهاية TreeViewItem.Header (أقرب إلى الجانب الأيمن من تحكم TreeView)، ولكن لا ماتر ما أحاول رأس واسعة هو دائما أقل من حجم تريفيف وفكورسي "yourcolor.net و "تظهر في مكان ما في منتصف السيطرة. وهذا ربما سؤال newbish جدا. أنا بدأت للتو لمعرفة WPF.

<TreeView Grid.Row="1" Grid.ColumnSpan="2" Margin="3,3,3,3" Name="treeView1" Width="300">
    <TreeViewItem HorizontalAlignment="Stretch">
        <TreeViewItem.Header>
            <Grid HorizontalAlignment="Stretch">
                <Grid.RowDefinitions>
                    <RowDefinition  />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition />
                    <ColumnDefinition Width="30" />
                </Grid.ColumnDefinitions>

                <Label Grid.Column="0" Grid.Row="0">General</Label>
                <Label Grid.Column="1" Grid.Row="0">Img</Label>
            </Grid>
        </TreeViewItem.Header>
    </TreeViewItem>
</TreeView>

Answer 1

لتحقيق ذلك كنت بحاجة إلى تغيير القالب السيطرة على TreeviewItem باستخدام ItemContainerStyle من تريفيف (وهذا هو النمط الذي يحصل على تطبيقها على أي عنصر في جذر تريفيف).

لا امتدت الافتراضي TreeViewItem، لذلك لا يمتد على طول الطريق إلى اليمين. عند تعيين رأس، فمن داخل TreeViewItem وبالتالي لا يمكن أن تمتد الماضي عليه.

وأنا لن الرد على النمط كله لأنه سيكون الطريق طويلا.

إليك ما يجب القيام به في مزيج: حدد TreeViewItem الخاص بك، انقر بزر الماوس الأيمن واختار "التحكم تحرير أجزاء / تحرير نسخة". حفظ أسلوب حيثما تريد.

والآن، في القالب، قم بتوسيع الاشياء وتحديد موقع "دينار بحريني" عنصر، وهي الحدود. تغيير ممتلكاتها روسبان إلى "2".

وأخيرا، تعيين "HorizontalContentAlignment" ممتلكات البند الخاص بك إلى "تمدد" (سواء على البند أو من خلال أسلوب إذا كنت بحاجة إلى تطبيق ذلك على عدة العقد).

والآن يجب أن يكون لديك البند العرض الصحيح. الآن، وهذا لا ينطبق إلا على البند الذي حددته. إذا كنت تريد أن للعمل من أجل أي بند تضيفها إلى تريفيف، تحتاج إلى تغيير "ItemContainerStyle" من تريفيف إلى النمط الذي تم إنشاؤه حديثا، وإزالة النمط الذي مزيج وضعت على TreeViewItem.

وأخيرا وليس آخرا، تحتاج إلى تعيين ItemContainerStyle من TreeViewItem لهذا النمط نفسه بحيث أبنائها تمتد أيضا على طول الطريق، وهلم جرا وهكذا دواليك.

وحتى في نهاية المطاف، مع المثال وعقدة الطفل على البند الأول:

<Grid x:Name="LayoutRoot">
<TreeView Margin="3,3,3,3" Name="treeView1" Width="300" ItemContainerStyle="{DynamicResource TreeViewItemStyle1}">
<TreeViewItem HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch" ItemContainerStyle="{DynamicResource TreeViewItemStyle1}">
    <TreeViewItem.Header>
        <Grid HorizontalAlignment="Stretch">
            <Grid.RowDefinitions>
                <RowDefinition  />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition />
                <ColumnDefinition Width="30" />
            </Grid.ColumnDefinitions>

            <Label Grid.Column="0" Grid.Row="0">General</Label>
            <Label Grid.Column="1" Grid.Row="0">Img</Label>
        </Grid>
    </TreeViewItem.Header>
    <TreeViewItem>
     <TreeViewItem.Header>
        <Grid HorizontalAlignment="Stretch">
            <Grid.RowDefinitions>
                <RowDefinition  />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition />
                <ColumnDefinition Width="30" />
            </Grid.ColumnDefinitions>

            <Label Grid.Column="0" Grid.Row="0">General</Label>
            <Label Grid.Column="1" Grid.Row="0">Img</Label>
        </Grid>
    </TreeViewItem.Header>
</TreeViewItem>
</TreeViewItem>

    

وو"TreeViewItemStyle1" هو النمط الذي مزيج خلق لكم.

وتحرير

وكما هو مطلوب، وهنا النمط الكامل كما تم إنشاؤها بواسطة مزيج وتعديلها. وهو طويل لأنه هو في الأساس نسخة من الطراز المدمج في مع تعديلات طفيفة.

<Style x:Key="TreeViewItemFocusVisual">
            <Setter Property="Control.Template">
                <Setter.Value>
                    <ControlTemplate>
                        <Rectangle/>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <PathGeometry x:Key="TreeArrow" Figures="M0,0 L0,6 L6,0 z"/>
        <Style x:Key="ExpandCollapseToggleStyle" TargetType="{x:Type ToggleButton}">
            <Setter Property="Focusable" Value="False"/>
            <Setter Property="Width" Value="16"/>
            <Setter Property="Height" Value="16"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ToggleButton}">
                        <Border Width="16" Height="16" Background="Transparent" Padding="5,5,5,5">
                            <Path Fill="Transparent" Stroke="#FF989898" x:Name="ExpandPath" Data="{StaticResource TreeArrow}">
                                <Path.RenderTransform>
                                    <RotateTransform Angle="135" CenterX="3" CenterY="3"/>
                                </Path.RenderTransform>
                            </Path>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="Stroke" TargetName="ExpandPath" Value="#FF1BBBFA"/>
                                <Setter Property="Fill" TargetName="ExpandPath" Value="Transparent"/>
                            </Trigger>
                            <Trigger Property="IsChecked" Value="True">
                                <Setter Property="RenderTransform" TargetName="ExpandPath">
                                    <Setter.Value>
                                        <RotateTransform Angle="180" CenterX="3" CenterY="3"/>
                                    </Setter.Value>
                                </Setter>
                                <Setter Property="Fill" TargetName="ExpandPath" Value="#FF595959"/>
                                <Setter Property="Stroke" TargetName="ExpandPath" Value="#FF262626"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <Style x:Key="TreeViewItemStyle1" TargetType="{x:Type TreeViewItem}">
            <Setter Property="Background" Value="Transparent"/>
            <Setter Property="HorizontalContentAlignment" Value="{Binding Path=HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
            <Setter Property="VerticalContentAlignment" Value="{Binding Path=VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
            <Setter Property="Padding" Value="1,0,0,0"/>
            <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
            <Setter Property="FocusVisualStyle" Value="{StaticResource TreeViewItemFocusVisual}"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type TreeViewItem}">
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition MinWidth="19" Width="Auto"/>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition Width="*"/>
                            </Grid.ColumnDefinitions>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition/>
                            </Grid.RowDefinitions>
                            <ToggleButton x:Name="Expander" Style="{StaticResource ExpandCollapseToggleStyle}" ClickMode="Press" IsChecked="{Binding Path=IsExpanded, RelativeSource={RelativeSource TemplatedParent}}"/>
                            <Border x:Name="Bd" SnapsToDevicePixels="true" Grid.Column="1" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}" Grid.ColumnSpan="2">
                                <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" x:Name="PART_Header" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" ContentSource="Header"/>
                            </Border>
                            <ItemsPresenter x:Name="ItemsHost" Grid.Column="1" Grid.ColumnSpan="2" 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="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
                                <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.HighlightTextBrushKey}}"/>
                            </Trigger>
                            <MultiTrigger>
                                <MultiTrigger.Conditions>
                                    <Condition Property="IsSelected" Value="true"/>
                                    <Condition Property="IsSelectionActive" Value="false"/>
                                </MultiTrigger.Conditions>
                                <Setter Property="Background" TargetName="Bd" Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/>
                                <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
                            </MultiTrigger>
                            <Trigger Property="IsEnabled" Value="false">
                                <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

Answer 2

وانظر هذا المنصب لمدة العينات. أنا خلقت للتو هذه اليوم.

تسليط الضوء على خط TreeViewItem كله في WPF