1. 홈
  2. 질의 응답
  3. 나는 전체 행이 강조 될 수 있도록 그림과 같이, 기본 WPF 트 리뷰/TreeViewItem 템플릿을 적용 할

나는 전체 행이 강조 될 수 있도록 그림과 같이, 기본 WPF 트 리뷰/TreeViewItem 템플릿을 적용 할

2014-12-10 3 views
4

그러나나는 전체 행이 강조 될 수 있도록 그림과 같이, 기본 WPF 트 리뷰/TreeViewItem 템플릿을 적용 할

enter image description here

, I 검색에서 몇 가지 템플릿을 시도했지만 그 중 아무도 실제로 효과를 낼 수는 있지만 일부 잘못된 대답도 올바른 것으로 표시되었습니다 ...

작동하는 것처럼 보이지만 추가 C# 코드가 추가되었습니다. , 또는 여분의 코드는 필요 없지만 완벽하게 작동하지는 않습니다.

추가 C# 코드를 추가하고 싶지 않고 기본 템플릿 만 변경하고 싶습니다. 누구든지 좋은 아이디어가 있습니까?

고맙습니다.

---- 편집 ----

@Nick, 템플릿을 사용 후, 그것은 다음과 같이 표시됩니다,

첫째, 그것은 "에서의"전체 "행을 강조하지 않았다 전체 "나는 나무의 가장 넓은 너비를 의미합니다.

초, 어린이를 포함하여 추가 영역을 강조 표시했습니다.

enter image description here

출처

2014-12-10 RainCast

+0

1) 기본 템플릿을 덮어 씁니다. 2) Snoop을 사용하여 을 강조 표시해야하는 정확한 패널을 찾습니다. 3) 트리거, 'OnSelected'속성에서 해당 패널의 배경색을 추가하십시오. –

+0

@Kumar이 질문은 우리가 처음 생각한 것보다 실제로 어렵습니다. TreeViewItem은 다른 컨트롤과 매우 다른 재귀 구조를 사용합니다. – RainCast

+0

예, 맞습니다. 더 확인하고 다시 연락하도록하겠습니다. –

답변

1

당신은 ItemContainerStyle의 템플릿을 수정해야합니다. Blend에서 TreeView를 마우스 오른쪽 버튼으로 클릭하고 "추가 템플릿 편집"-> "생성 된 항목 컨테이너 편집"-> "복사본 편집"을 선택하십시오. xaml에 기본 템플릿의 복사본을 만듭니다. 그런 다음 당신이 다음과 같은 코드를 찾을 필요에 isSelected 속성에 의해 활성화되는 트리거에서

 <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" ClickMode="Press" IsChecked="{Binding IsExpanded, RelativeSource={RelativeSource TemplatedParent}}" Style="{StaticResource ExpandCollapseToggleStyle}"/> 
      <Border x:Name="Bd" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Grid.Column="1" Padding="{TemplateBinding Padding}" SnapsToDevicePixels="true"> 
      <ContentPresenter x:Name="PART_Header" ContentSource="Header" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/> 
      </Border> 
      <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="{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>

봐. "Bd"라는 요소의 Background 속성을 수정한다는 것을 알 수 있습니다. 그것은 텍스트 주위의 경계입니다. 선택 항목을 전체 행으로 확장하려면 다음을 수행해야합니다.

  1. 위의 코드 예제의 두 번째 줄에있는 눈금에 이름을 지정하십시오.

  2. IsSelected 속성 트리거의 Setter를 수정하여 테두리 컨트롤 대신 눈금을 대상으로 지정하십시오. 이렇게하면 전체 행이 강조 표시됩니다.

  3. 아래의 MultiTrigger Setter를 테두리 컨트롤 대신 표 대상으로 수정하십시오. 이 옵션을 선택하면 전체 행이 강조 표시되지만 창이 초점을 맞추지 않습니다. 여기

전체 행을 선택 적용 할 수정 된 버전입니다 : 

 <ControlTemplate TargetType="{x:Type TreeViewItem}"> 
     <Grid x:Name="itemGrid"> 
      <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" ClickMode="Press" IsChecked="{Binding IsExpanded, RelativeSource={RelativeSource TemplatedParent}}" Style="{StaticResource ExpandCollapseToggleStyle}"/> 
      <Border x:Name="Bd" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Grid.Column="1" Padding="{TemplateBinding Padding}" SnapsToDevicePixels="true"> 
      <ContentPresenter x:Name="PART_Header" ContentSource="Header" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/> 
      </Border> 
      <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="itemGrid" 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="itemGrid" 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>

출처

2014-12-10 11:31:14

+0

나는 그것을 시도했다, 작동하지 않았다, 그것은 전체 라인 2.에 적용되지 않았다. 그것은 추가 영역을 강조 표시했다. 나의 포스트 편집을 참조해라. – RainCast

+0

사실,이 질문은 실제로 우리 모두 처음에 생각하는 것보다 어렵습니다. TreeViewItem은 다른 컨트롤과 매우 다른 재귀 구조를 사용합니다. – RainCast

0

하지 최적의 솔루션,하지만 난 어쨌든 그것을 언급 생각했다. 흰색 그리드를 단순히 덧씌우면 그 일을합니다. 다음과 ItemsPresenter를 덮어 : 나는 최근 비슷한 일을해야했다

<Grid Grid.Row="1"         
     Grid.Column="0"         
     Grid.ColumnSpan="3" 
     > 
     <Grid.ColumnDefinitions> 
     <ColumnDefinition MinWidth="19" Width="Auto"/> 
     <ColumnDefinition Width="Auto"/> 
     <ColumnDefinition Width="*"/> 
    </Grid.ColumnDefinitions> 
    <Grid.Style> 
     <Style TargetType="Grid"> 
      <Setter Property="Background" Value="White"/> 
     </Style> 
    </Grid.Style> 
    <ItemsPresenter x:Name="ItemsHost" Grid.Column="1" Grid.ColumnSpan="2"/> 
</Grid>

출처

2017-09-07 11:38:37 user8574327

1

과 질문은 꽤 오래지만, 내 솔루션에서 뭔가를 얻을 수있을 것처럼이 페이지에 우연히 다른 사람을 생각.

또한 Tim이 주석에서 설명한 것처럼 ControlTemplate도 편집했습니다. "Expander"토글 버튼과 "Bd"테두리 컨트롤을 TreeView의 전체 너비에 걸쳐있는 단일 그리드로 그룹화했습니다. 그런 다음 IsSelected 트리거 아래에서 테두리 대신 새로 만든 눈금에 강조 표시를 설정합니다.

<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> 
    <!-- created ItemRowGrid to contain both togglebutton and border --> 
    <Grid x:Name="ItemRowGrid" Grid.ColumnSpan="3" Margin="1.5,0,0,0"> 
     <ToggleButton x:Name="Expander" ClickMode="Press" IsChecked="{Binding IsExpanded, RelativeSource={RelativeSource TemplatedParent}}" Style="{StaticResource ExpandCollapseToggleStyle}" HorizontalAlignment="Left" d:LayoutOverrides="Width, LeftMargin, RightMargin"/> 
     <Border x:Name="Bd" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Grid.Column="0" Padding="{TemplateBinding Padding}" SnapsToDevicePixels="true" Margin="17.5,0,-17.5,0"> 
      <ContentPresenter x:Name="PART_Header" ContentSource="Header" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/> 
     </Border> 
    </Grid> 
    <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="Foreground" Value="{DynamicResource {x:Static SystemColors.HighlightTextBrushKey}}"/> 
     <!-- setting highlight target to created ItemRowGrid instead of border --> 
     <Setter Property="Background" TargetName="ItemRowGrid" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/> 
    </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.InactiveSelectionHighlightBrushKey}}"/> 
     <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.InactiveSelectionHighlightTextBrushKey}}"/> 
    </MultiTrigger> 
    <Trigger Property="IsEnabled" Value="false"> 
     <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/> 
    </Trigger> 
</ControlTemplate.Triggers> 
</ControlTemplate>

그것은 정확히 OP가 "어린이"행에 대한 강조는 들여 쓰기로 시작하기 때문에 요청 방법이 아니다 : 여기

내 편집과 트 리뷰의 ControlTemplate이 있습니다. 그러나 하위 항목을 포함하지 않고 각 행을 올바르게 강조 표시합니다.

출처

2017-10-13 09:49:00 yushi

 관련 문제

  • 관련 문제 없음^_^