WPF 트리거에서 Grid.ColumnSpan 변경

Question

tl; dr : 2 개 항목을 선택하면 2 열에 표시하고 1 개 항목 만 선택하면 2 열을 표시하려고합니다.

왼쪽에는 두 개의 ListBox가 도킹되어 있고 오른쪽에는 두 개의 열 그리드가있는 DockPanel이 있습니다.

listBox1에서 항목을 선택하면 Grid의 Column 0에 세부 정보보기를 표시합니다.

listBox2에서 항목을 선택하면 격자의 1 열에 세부 정보보기가 표시됩니다.

<DockPanel> 

     <StackPanel DockPanel.Dock="Left" Orientation="Horizontal"> 
      <ListBox x:Name="listBox1" ItemsSource="{Binding Items1}" SelectedItem="{Binding SelectedItem1}"/>      
      <ListBox x:Name="listBox2" ItemsSource="{Binding Items2}" SelectedItem="{Binding SelectedItem2}"/> 
     </StackPanel> 

     <Grid> 
      <Grid.ColumnDefinitions> 
       <ColumnDefinition Width="*" /> 
       <ColumnDefinition Width="*" /> 
      </Grid.ColumnDefinitions> 

      <ContentControl Grid.Column="0" Content="{Binding SelectedItem1}" ContentTemplateSelector="{StaticResource SelectedItemTemplateSelector}"/> 
      <ContentControl Grid.Column="1" Content="{Binding SelectedItem2}" ContentTemplateSelector="{StaticResource SelectedItemTemplateSelector}"/> 
     </Grid> 

    </DockPanel> 

잘 작동합니다. 그러나 ListBox 중 하나에서 선택한 항목이 있지만 다른 항목이없는 경우 세부 정보보기가 두 눈금 열으로 확장되도록 수정하고 싶습니다.

첫 번째 생각은 ListBox의 SelectedIndex를 기반으로 ContentControls의 ColumnSpan을 수정하는 몇 가지 DataTriggers를 만드는 것이 었습니다.

일반적으로 Grid.Column = "0"에있는 세부 정보보기에서는 정상적으로 작동합니다. 세부 사항은 일반적으로 Grid.Column을에 살고 있음을 볼 수에 대한 그러나, 그것은 작동하지 않습니다 = "1"원래 열 번호는 하드 코딩되어 있기 때문에 :

  <ContentControl Grid.Column="0" Content="{Binding SelectedItem1}" ContentTemplateSelector="{StaticResource SelectedItemTemplateSelector}"> 
       <ContentControl.Style> 
        <Style TargetType="ContentControl"> 
         <Style.Triggers> 
          <DataTrigger Binding="{Binding ElementName=listBox2, Path=SelectedIndex}" Value="-1"> 
           <Setter Property="Grid.ColumnSpan" Value="2"/> 
          </DataTrigger> 
         </Style.Triggers> 
        </Style> 
       </ContentControl.Style> 
      </ContentControl> 

      <ContentControl Grid.Column="1" Content="{Binding SelectedItem2}" ContentTemplateSelector="{StaticResource SelectedItemTemplateSelector}"> 
       <ContentControl.Style> 
        <Style TargetType="ContentControl"> 
         <Style.Triggers> 
          <DataTrigger Binding="{Binding ElementName=listBox1, Path=SelectedIndex}" Value="-1"> 
           <!--Can't modify Grid.Column since it's hardcoded above!--> 
           <Setter Property="Grid.Column" Value="0"/> 
           <Setter Property="Grid.ColumnSpan" Value="2"/> 
          </DataTrigger> 
         </Style.Triggers> 
        </Style> 
       </ContentControl.Style> 
      </ContentControl> 

나는 값을 할 수있는 DataTrigger를 만들 수 있다면 ListBox.SelectedIndex (즉,> = 0)에 대한 비교를 사용하면 먼저 열 번호를 하드 코딩하지 않아도됩니다.

XAML에서 이와 같은 작업을 수행 할 수있는 방법이 있습니까?

Answer 1

here을 설명한 변환기를 구현하는 결과가 발생했습니다.

Answer 2

항상 숨겨진 요소 바인딩 속임수를 사용할 수 있습니다. 아래 예제에서 bindme를 2로 변경하면 그리드 범위가 변경됩니다. 스토리 보드로 애니메이트 할 수없는 모든 유형의 항목에서이 작업을 수행합니다.

< 사각형 X : 이름 = "bindme"너비 = "0"높이 = "0"태그 = "1"/>

< 그리드 Grid.ColumnSpan = "{바인딩 태그, ElementName을 = bindme}" >