none
Настройка стилей ScrollBar и TreeView WPF RRS feed

  • Вопрос

  • Здравствуйте!

    Мне нужно переделать интерфейс левой части, так чтобы он был максимально похож на интерфейс картинки правой части.

    Вопрос:

    1. Как можно изменить изображение выделенного красным цветом переключателя на изображение плюс-минус.

    2. как убрать расстояние на левой картинке(отступ от края от TreeViewItem) чтобы вставить туда checkbox и progress bar

    3. Как изменить ScrollBar левого интерфейса на правый( желательно с примером)

     

    Заранее благодарен!

    11 июля 2013 г. 7:16

Ответы

  • Ну и пункт 1, кстати, можно обойтись и без пункта 2.

    Вот Xaml:

    <Grid>
        <TreeView Height="100">
            <TreeView.Resources>
                <Style TargetType="TreeViewItem">
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="TreeViewItem">
                                <Grid>
                                    <VisualStateManager.VisualStateGroups>
                                        <VisualStateGroup x:Name="ExpansionStates">
                                            <VisualState x:Name="Collapsed" />
                                            <VisualState x:Name="Expanded">
                                                <Storyboard>
                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ItemsHost" Storyboard.TargetProperty="(UIElement.Visibility)" Duration="0">
                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Visible}"  />
                                                    </ObjectAnimationUsingKeyFrames>
                                                </Storyboard>
                                            </VisualState>
                                        </VisualStateGroup>
                                    </VisualStateManager.VisualStateGroups>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition MinWidth="19"
                                                Width="Auto" />
                                        <ColumnDefinition Width="Auto" />
                                        <ColumnDefinition Width="*" />
                                    </Grid.ColumnDefinitions>
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="Auto" />
                                        <RowDefinition />
                                    </Grid.RowDefinitions>
    
                                    <ToggleButton IsChecked="{Binding IsExpanded, RelativeSource={RelativeSource TemplatedParent}}">
                                        <ToggleButton.Template>
                                            <ControlTemplate TargetType="ToggleButton">
                                                <Grid Background="Transparent">
                                                    <VisualStateManager.VisualStateGroups>
                                                        <VisualStateGroup x:Name="CheckStates">
                                                            <VisualState x:Name="Unchecked" />
                                                            <VisualState x:Name="Checked">
                                                                <Storyboard>
                                                                    <DoubleAnimation Storyboard.TargetName="UncheckedVisual" Storyboard.TargetProperty="Opacity" To="0" Duration="0" />
                                                                    <DoubleAnimation Storyboard.TargetName="CheckedVisual" Storyboard.TargetProperty="Opacity" To="1" Duration="0" />
                                                                </Storyboard>
                                                            </VisualState>
                                                        </VisualStateGroup>                                                            
                                                    </VisualStateManager.VisualStateGroups>
                                                    <TextBlock Text="+" x:Name="UncheckedVisual" />
                                                    <TextBlock Text="-" x:Name="CheckedVisual" />
                                                </Grid>
                                            </ControlTemplate>
                                        </ToggleButton.Template>
                                    </ToggleButton>
                                    <ContentControl Content="{TemplateBinding Header}" Grid.Column="1" />
                                        
                                    <ItemsPresenter x:Name="ItemsHost" Grid.Row="1" Visibility="Collapsed" Grid.ColumnSpan="100" />
                                </Grid>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </TreeView.Resources>
            <TreeViewItem Header="1">
                <TreeViewItem.ItemContainerStyle>
                    <Style TargetType="TreeViewItem">
                        <Setter Property="Template">
                            <Setter.Value>
                                <ControlTemplate TargetType="TreeViewItem">
                                    <StackPanel Orientation="Horizontal" Margin="0,0,0,0">
                                        <ContentControl Content="{TemplateBinding Header}" />
                                    </StackPanel>                                    
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                    </Style>
                </TreeViewItem.ItemContainerStyle>
                <TreeViewItem Header="11" />
                <TreeViewItem Header="12" />
                <TreeViewItem Header="13" />
                <TreeViewItem Header="14" />
            </TreeViewItem>
        </TreeView>
    </Grid>

    Вот так выглядит:

    Заменяете мои TextBlock на Image и вперед.

    Ну и наконец, где все это можно посмотреть не по кусочкам, а целиком - MSDN.

    12 июля 2013 г. 8:52
    Отвечающий
  • Добрый день.

    Вопрос весьма объемный. Давайте для начала, покажу третий пункт.

    <Grid>
        <TreeView Height="100">
            <TreeView.Resources>
                <Style x:Key="ScrollBarThumbStyle" TargetType="{x:Type Thumb}">
                    <Setter Property="IsTabStop" Value="False"/>
                    <Setter Property="Focusable" Value="False"/>
                    <Setter Property="Margin" Value="1,0,1,0" />
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="{x:Type Thumb}">
                                <Rectangle Fill="LightBlue" Margin="2"></Rectangle>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>                
    
                <ControlTemplate x:Key="VerticalScrollBar" TargetType="{x:Type ScrollBar}">
                    <Grid>
                        <Track Name="PART_Track"  
                    IsDirectionReversed="True">                            
                            <Track.Thumb>
                                <Thumb Style="{StaticResource ScrollBarThumbStyle}">
                                </Thumb>
                            </Track.Thumb>
                        </Track>                        
                    </Grid>
                </ControlTemplate>
                <Style TargetType="ScrollBar">
                    <Setter Property="Template" Value="{StaticResource VerticalScrollBar}" />
                </Style>
            </TreeView.Resources>
            <TreeViewItem Header="1">
                <TreeViewItem Header="11" />
                <TreeViewItem Header="12" />
                <TreeViewItem Header="13" />
                <TreeViewItem Header="14" />
            </TreeViewItem>
            <TreeViewItem Header="2" />
            <TreeViewItem Header="3" />
            <TreeViewItem Header="4" />
            <TreeViewItem Header="5" />
            <TreeViewItem Header="6" />
            <TreeViewItem Header="7" />
            <TreeViewItem Header="8" />
            <TreeViewItem Header="9" />
            <TreeViewItem Header="10" />
                
        </TreeView>
    </Grid>

    Выглядит вот так:

    Поигравшись с ScrollBarThumbStyle, можете задать то отображение, которое вам нужно.

    11 июля 2013 г. 10:19
    Отвечающий
  • По второму пункту. Можно сделать вот так:

    <TreeView Height="100">            
        <TreeViewItem Header="1">
            <TreeViewItem.ItemContainerStyle>
                <Style TargetType="TreeViewItem">
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="TreeViewItem">
                                <StackPanel Orientation="Horizontal" Margin="-10,0,0,0">
                                    <ContentControl Content="{TemplateBinding Header}" />
                                </StackPanel>                                    
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </TreeViewItem.ItemContainerStyle>
            <TreeViewItem Header="11" />
            <TreeViewItem Header="12" />
            <TreeViewItem Header="13" />
            <TreeViewItem Header="14" />
        </TreeViewItem>
    </TreeView>

    Выглядит вот так:

    11 июля 2013 г. 10:29
    Отвечающий

Все ответы

  • Добрый день.

    Вопрос весьма объемный. Давайте для начала, покажу третий пункт.

    <Grid>
        <TreeView Height="100">
            <TreeView.Resources>
                <Style x:Key="ScrollBarThumbStyle" TargetType="{x:Type Thumb}">
                    <Setter Property="IsTabStop" Value="False"/>
                    <Setter Property="Focusable" Value="False"/>
                    <Setter Property="Margin" Value="1,0,1,0" />
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="{x:Type Thumb}">
                                <Rectangle Fill="LightBlue" Margin="2"></Rectangle>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>                
    
                <ControlTemplate x:Key="VerticalScrollBar" TargetType="{x:Type ScrollBar}">
                    <Grid>
                        <Track Name="PART_Track"  
                    IsDirectionReversed="True">                            
                            <Track.Thumb>
                                <Thumb Style="{StaticResource ScrollBarThumbStyle}">
                                </Thumb>
                            </Track.Thumb>
                        </Track>                        
                    </Grid>
                </ControlTemplate>
                <Style TargetType="ScrollBar">
                    <Setter Property="Template" Value="{StaticResource VerticalScrollBar}" />
                </Style>
            </TreeView.Resources>
            <TreeViewItem Header="1">
                <TreeViewItem Header="11" />
                <TreeViewItem Header="12" />
                <TreeViewItem Header="13" />
                <TreeViewItem Header="14" />
            </TreeViewItem>
            <TreeViewItem Header="2" />
            <TreeViewItem Header="3" />
            <TreeViewItem Header="4" />
            <TreeViewItem Header="5" />
            <TreeViewItem Header="6" />
            <TreeViewItem Header="7" />
            <TreeViewItem Header="8" />
            <TreeViewItem Header="9" />
            <TreeViewItem Header="10" />
                
        </TreeView>
    </Grid>

    Выглядит вот так:

    Поигравшись с ScrollBarThumbStyle, можете задать то отображение, которое вам нужно.

    11 июля 2013 г. 10:19
    Отвечающий
  • По второму пункту. Можно сделать вот так:

    <TreeView Height="100">            
        <TreeViewItem Header="1">
            <TreeViewItem.ItemContainerStyle>
                <Style TargetType="TreeViewItem">
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="TreeViewItem">
                                <StackPanel Orientation="Horizontal" Margin="-10,0,0,0">
                                    <ContentControl Content="{TemplateBinding Header}" />
                                </StackPanel>                                    
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </TreeViewItem.ItemContainerStyle>
            <TreeViewItem Header="11" />
            <TreeViewItem Header="12" />
            <TreeViewItem Header="13" />
            <TreeViewItem Header="14" />
        </TreeViewItem>
    </TreeView>

    Выглядит вот так:

    11 июля 2013 г. 10:29
    Отвечающий
  • Ну и пункт 1, кстати, можно обойтись и без пункта 2.

    Вот Xaml:

    <Grid>
        <TreeView Height="100">
            <TreeView.Resources>
                <Style TargetType="TreeViewItem">
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="TreeViewItem">
                                <Grid>
                                    <VisualStateManager.VisualStateGroups>
                                        <VisualStateGroup x:Name="ExpansionStates">
                                            <VisualState x:Name="Collapsed" />
                                            <VisualState x:Name="Expanded">
                                                <Storyboard>
                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ItemsHost" Storyboard.TargetProperty="(UIElement.Visibility)" Duration="0">
                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Visible}"  />
                                                    </ObjectAnimationUsingKeyFrames>
                                                </Storyboard>
                                            </VisualState>
                                        </VisualStateGroup>
                                    </VisualStateManager.VisualStateGroups>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition MinWidth="19"
                                                Width="Auto" />
                                        <ColumnDefinition Width="Auto" />
                                        <ColumnDefinition Width="*" />
                                    </Grid.ColumnDefinitions>
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="Auto" />
                                        <RowDefinition />
                                    </Grid.RowDefinitions>
    
                                    <ToggleButton IsChecked="{Binding IsExpanded, RelativeSource={RelativeSource TemplatedParent}}">
                                        <ToggleButton.Template>
                                            <ControlTemplate TargetType="ToggleButton">
                                                <Grid Background="Transparent">
                                                    <VisualStateManager.VisualStateGroups>
                                                        <VisualStateGroup x:Name="CheckStates">
                                                            <VisualState x:Name="Unchecked" />
                                                            <VisualState x:Name="Checked">
                                                                <Storyboard>
                                                                    <DoubleAnimation Storyboard.TargetName="UncheckedVisual" Storyboard.TargetProperty="Opacity" To="0" Duration="0" />
                                                                    <DoubleAnimation Storyboard.TargetName="CheckedVisual" Storyboard.TargetProperty="Opacity" To="1" Duration="0" />
                                                                </Storyboard>
                                                            </VisualState>
                                                        </VisualStateGroup>                                                            
                                                    </VisualStateManager.VisualStateGroups>
                                                    <TextBlock Text="+" x:Name="UncheckedVisual" />
                                                    <TextBlock Text="-" x:Name="CheckedVisual" />
                                                </Grid>
                                            </ControlTemplate>
                                        </ToggleButton.Template>
                                    </ToggleButton>
                                    <ContentControl Content="{TemplateBinding Header}" Grid.Column="1" />
                                        
                                    <ItemsPresenter x:Name="ItemsHost" Grid.Row="1" Visibility="Collapsed" Grid.ColumnSpan="100" />
                                </Grid>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </TreeView.Resources>
            <TreeViewItem Header="1">
                <TreeViewItem.ItemContainerStyle>
                    <Style TargetType="TreeViewItem">
                        <Setter Property="Template">
                            <Setter.Value>
                                <ControlTemplate TargetType="TreeViewItem">
                                    <StackPanel Orientation="Horizontal" Margin="0,0,0,0">
                                        <ContentControl Content="{TemplateBinding Header}" />
                                    </StackPanel>                                    
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                    </Style>
                </TreeViewItem.ItemContainerStyle>
                <TreeViewItem Header="11" />
                <TreeViewItem Header="12" />
                <TreeViewItem Header="13" />
                <TreeViewItem Header="14" />
            </TreeViewItem>
        </TreeView>
    </Grid>

    Вот так выглядит:

    Заменяете мои TextBlock на Image и вперед.

    Ну и наконец, где все это можно посмотреть не по кусочкам, а целиком - MSDN.

    12 июля 2013 г. 8:52
    Отвечающий
  • Большое спасибо, Алексей!
    12 июля 2013 г. 9:19