Question

我想使用VisualStateManager来更改列表框项的外观。我创建了一个简化的例子。当列表框或列表框项目只有width = 500的空间时，它应该将背景设置为Beige，否则设置为Green。

我尝试了以下和其他一些变体，但它们都没有奏效。有谁知道如何解决这个问题？

  <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

我发现这样做的最简单方法是创建UserControl代码DataTemplate。像这样的东西

<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>

然后添加到ListBox 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

通常我们不直接操作ListBox的项目，常见的方法是将项目添加到ObservableCollection并设置ItemSource的{{1}}属性以绑定到ListBox。

如果你使用ObservableCollection，你可以使用ItemSource之类的@SWilko说。但它不需要使用UserControl。

例如，我创建了一个RelativeSource类，它有一个属性Person。我使用Name替换<TextBlock x:Name="PathTextBlock" Text="{Binding name}" />。

如果要直接添加ListBox项，请使用<TextBlock x:Name="PathTextBlock" Text="{Binding RelativeSource={RelativeSource Mode=None}}" />更改VisualStateManager项的外观。您可以修改ListBox。

要修改ItemContainerStyle的模板，我们可以在＆＃34; 文档大纲＆＃34;中选择ListBoxItem。然后右键单击，然后选择＆＃34; 编辑其他模板＆＃34;→＆＃34; 编辑生成的项目容器（ItemContainerStyle）＆＃34; →＆＃34; 编辑副本... ＆＃34;。

您可以在ListBox中创建VisualStateGroup。

例如：

<VisualStateManager.VisualStateGroups>

您可以编辑<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>属性设置为500的AdaptiveTrigger，效果不明显。您可以将其设置为600。

VisualState不应用于列表框ItemTemplate

2 个答案: