VisualStateがリストボックスに適用されないItemTemplate

Question

VisualStateManagerを使用してリストボックス項目の外観を変更したいと考えています。私は簡単な例を作りました。リストボックスまたはリストボックスの項目がwidth = 500のスペースしかない場合は、背景をたとえばベージュに、そうでなければグリーンに設定する必要があります。

私は以下のいくつかのバリエーションを試しましたが、どちらも機能しませんでした。誰にもこの問題を解決する方法がありますか？

<ListBox Grid.Column="0"> 
     <ListBoxItem>asdfasf</ListBoxItem> 
     <ListBoxItem>fasf</ListBoxItem> 
     <ListBoxItem>fasf</ListBoxItem> 
     <ListBoxItem>asdsf</ListBoxItem> 
     <ListBoxItem>aasf</ListBoxItem> 
     <ListBox.ItemTemplate> 
      <DataTemplate> 
       <ContentControl> 
        <VisualStateManager.VisualStateGroups> 
         <VisualStateGroup x:Name="visualStateGroup" > 
          <VisualState> 
           <VisualState.StateTriggers> 
            <AdaptiveTrigger MinWindowWidth="500" /> 
           </VisualState.StateTriggers> 
           <VisualState.Setters> 
            <Setter Target="PathTextBlock.Text" Value="a" /> 
            <Setter Target="border.Background" Value="Beige" /> 
           </VisualState.Setters> 
          </VisualState> 
          <VisualState> 
           <VisualState.StateTriggers> 
            <AdaptiveTrigger MinWindowWidth="0" /> 
           </VisualState.StateTriggers> 
           <VisualState.Setters> 
            <Setter Target="PathTextBlock.Text" Value="b" /> 
            <Setter Target="border.Background" Value="Green" /> 
           </VisualState.Setters> 
          </VisualState> 
         </VisualStateGroup> 
        </VisualStateManager.VisualStateGroups> 
        <ContentControl.Content> 
         <Border x:Name="border" > 
          <TextBlock x:Name="PathTextBlock" Text="{Binding RelativeSource={RelativeSource Mode=None}}" /> 
         </Border> 
        </ContentControl.Content> 
       </ContentControl> 

      </DataTemplate> 
     </ListBox.ItemTemplate> 
    </ListBox> 

私が採用してみました： https://stackoverflow.com/a/32092547/740651

Answer 1

私はこれを行うために見つける最も簡単な方法は、あなたのDataTemplateコードのUserControlを作成することです。したがって、このようなもの

<UserControl x:class="MyListBoxControl"> 
    <Grid> 
     <VisualStateManager.VisualStateGroups> 
        <VisualStateGroup x:Name="visualStateGroup" > 
         <VisualState> 
          <VisualState.StateTriggers> 
           <AdaptiveTrigger MinWindowWidth="500" /> 
          </VisualState.StateTriggers> 
          <VisualState.Setters> 
           <Setter Target="PathTextBlock.Text" Value="a" /> 
           <Setter Target="border.Background" Value="Beige" /> 
          </VisualState.Setters> 
         </VisualState> 
         <VisualState> 
          <VisualState.StateTriggers> 
           <AdaptiveTrigger MinWindowWidth="0" /> 
          </VisualState.StateTriggers> 
          <VisualState.Setters> 
           <Setter Target="PathTextBlock.Text" Value="b" /> 
           <Setter Target="border.Background" Value="Green" /> 
          </VisualState.Setters> 
         </VisualState> 
        </VisualStateGroup> 
       </VisualStateManager.VisualStateGroups>  
       <Border x:Name="border" > 
         <TextBlock x:Name="PathTextBlock" Text="{Binding RelativeSource={RelativeSource Mode=None}}" /> 
        </Border> 
       </Grid> 
      </UserControl> 

リストボックスItemTemplateに追加します。ビジュアルステートはそれに従って動作します。あなたのUserControlがあなたのページの上部にxmlns:myUserControls="[location of your controls]"

<ListBox Grid.Column="0"> 
    <ListBoxItem>asdfasf</ListBoxItem> 
    <ListBoxItem>fasf</ListBoxItem> 
    <ListBoxItem>fasf</ListBoxItem> 
    <ListBoxItem>asdsf</ListBoxItem> 
    <ListBoxItem>aasf</ListBoxItem> 
    <ListBox.ItemTemplate> 
     <DataTemplate> 
      <myUserControls:MyListBoxControl /> 
     </DataTemplate> 
    </ListBox.ItemTemplate> 
</ListBox> 

Answer 2

のようなものを格納する場所通常我々が直接リストボックスの項目を操作しないでくださいへの参照を作成する必要があります注意し、一般的な方法はに項目を追加していますObservableCollectionとItemSourceという特性をListBoxに設定してObservableCollectionに結合させます。

ItemSourceを使用する場合は、@SWilkoのようにUserControlを使用できます。しかし、RelativeSourceを使用する必要はありません。

たとえば、私はPersonクラスを作成し、プロパティはNameです。私は<TextBlock x:Name="PathTextBlock" Text="{Binding name}" />を使用して、<TextBlock x:Name="PathTextBlock" Text="{Binding RelativeSource={RelativeSource Mode=None}}" />を置き換えます。

リストボックスの項目を直接追加する場合は、VisualStateManagerを使用してListBoxの項目の外観を変更します。 ItemContainerStyleを編集できます。

ListBoxItemのテンプレートを変更するには、我々は「ドキュメントアウトライン」と右クリックでListBoxを選択することができ、その後、選択し「編集追加のテンプレート 『→』 編集生成されたアイテムのコンテナ（ItemContainerStyle）」→ " コピーを編集... "。

<VisualStateManager.VisualStateGroups>にVisualStateGroupを作成できます。

たとえば

：

<VisualStateManager.VisualStateGroups> 
    <VisualStateGroup x:Name="CommonStates"> 
     ... 
    </VisualStateGroup> 
    <VisualStateGroup> 
     <VisualState> 
      <VisualState.StateTriggers> 
       <AdaptiveTrigger MinWindowWidth="600" /> 
      </VisualState.StateTriggers> 
      <VisualState.Setters> 
       <Setter Target="PathTextBlock.Text" Value="a" /> 
       <Setter Target="border.Background" Value="Beige" /> 
      </VisualState.Setters> 
     </VisualState> 
     <VisualState> 
      <VisualState.StateTriggers> 
       <AdaptiveTrigger MinWindowWidth="0" /> 
      </VisualState.StateTriggers> 
      <VisualState.Setters> 
       <Setter Target="PathTextBlock.Text" Value="b" /> 
       <Setter Target="border.Background" Value="Green" /> 
      </VisualState.Setters> 
     </VisualState> 
    </VisualStateGroup> 
</VisualStateManager.VisualStateGroups> 

そして、あなたが編集することができますがContentPresenterは次のように：ところで

<ContentPresenter x:Name="ContentPresenter" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" Style="{StaticResource BodyContentPresenterStyle}" TextWrapping="NoWrap" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"> 
    <Border Name="border"> 
     <TextBlock Name="PathTextBlock" Text="{TemplateBinding Content}"></TextBlock> 
    </Border> 
</ContentPresenter> 

、あなたはAdaptiveTriggerの500からMinWindowWidthプロパティを設定し、効果は明白ではないでしょう。あなたは600に設定することができます。