更改ListBox中所有ListBoxItem的样式(Windows Phone 8)

时间:2013-04-16 13:50:39

标签: c# xaml listbox windows-phone-8 listboxitem

我有一个带有一些Listboxitem的列表框,我想改变所有项目的样式。我知道,可以在资源中创建一个样式并将这个样式绑定到每个项目,但也许有可能这样做更容易(没有绑定)?使用ListBox.ItemTemplate?

              <ListBox SelectionChanged="ListBox_SelectionChanged">
                        <ListBoxItem x:Name="ItemAdress">
                                ....
                        </ListBoxItem>

                        <ListBoxItem x:Name="ItemPhone">
                                ....
                        </ListBoxItem>

                        <ListBoxItem x:Name="ItemEmail">
                                ....
                        </ListBoxItem>
              </Listbox>

事实上,我的目标是为每个项目添加保证金底部15。 (在项目之间添加空格)

2 个答案:

答案 0 :(得分:5)

注意:这适用于WPF;不确定它是否适用于Windows Phone。

您可以使用TargetType创建样式。这会影响此特定ListBox的所有ListBoxItem

<ListBox Height="200" Width="200">
  <ListBox.Resources>
    <Style TargetType="{x:Type ListBoxItem}">
      <Setter Property="Margin" Value="0,0,0,15" />
    </Style>
  </ListBox.Resources>
  <ListBoxItem x:Name="ItemAdress">
    ABC
  </ListBoxItem>
  <ListBoxItem x:Name="ItemPhone">
    DEF
  </ListBoxItem>
  <ListBoxItem x:Name="ItemEmail">
    GHI
  </ListBoxItem>
</ListBox>

如果要为所有列表框设置ListBoxItems的样式,可以在适当的父级别指定样式。

E.g。以下内容为此Grid下所有ListBox的所有ListBoxItem应用样式。

<Grid>
  <Grid.Resources>
    <Style TargetType="{x:Type ListBoxItem}">
      <Setter Property="Margin" Value="0,0,0,15" />
    </Style>
  </Grid.Resources>
  <ListBox x:Name="listBox1" Height="200" Width="200">
    ...
  </ListBox>
  <ListBox x:Name="listBox2" Height="200" Width="200">
    ...
  </ListBox>
</Grid>

答案 1 :(得分:4)

为了建立在publicgk上的答案,我想展示你如何做到这一点“简单”,以及在RE中添加更多信息给样式。如果您已经知道我将要讲述的内容,那么我道歉 - 我正在添加此内容,以防有人正在查看此问题,因此不熟悉WP8或XAML开发。

如果您希望以数据的方式显示样式,那么我建议您创建一个DataTemplate并将ListBox.ItemTemplate设置为该datatemplate(如上所述)。

您可以内联,或将DataTemplate作为资源并按名称引用它。

            <!--ItemsSource set in code-->
        <ListBox>
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <Border Background="Blue">
                        <TextBlock Text="{Binding Title}"/>
                    </Border>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>

        <!--ListOfTitles is a property in the code-->
        <ListBox ItemsSource="{Binding ListOfTitles}" ItemTemplate="{StaticResource redDataTemplateDefinedInResources}">
        </ListBox>

请注意,您需要设置itemssource,这可以在代码隐藏中通过为ListBox提供一个名称(x:name =“theName”)或使用绑定并绑定到具有该名称的属性(make)来完成一定要设置DataContext)

如果要设置默认ListBoxItem(如交互,边距等)的样式,那么你可以使用publicgk write创建一个带有控件targettype的样式,并将其设置为父级别,页面或应用级别的资源。对于整个应用程序中的所有控件,使用应用程序级别 - 使用资源字典来保持一切都干净整洁:)

这是创建FULL模板以覆盖Visual Studio 2012或Blend中样式的最简单方法: 右键单击设计器中的控件或文档大纲窗口中的控件,然后选择编辑模板,编辑副本,如果需要命名资源,请为其命名,或选择应用于所有(基本上删除名称)。

既然我喜欢表演和讲述,这里有一些图片:

然后继续并根据需要进行更改:)Create a copy of the template Apply to some or all You probably want to do something else than change the background, but just to show :)

模板代码:

<Style TargetType="ListBoxItem">
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="BorderThickness" Value="0"/>
        <Setter Property="BorderBrush" Value="Transparent"/>
        <Setter Property="Padding" Value="0"/>
        <Setter Property="HorizontalContentAlignment" Value="Left"/>
        <Setter Property="VerticalContentAlignment" Value="Top"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ListBoxItem">
                    <Border x:Name="LayoutRoot" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}">
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal"/>
                                <VisualState x:Name="MouseOver"/>
                                <VisualState x:Name="Disabled">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="LayoutRoot">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TransparentBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <DoubleAnimation Duration="0" To=".5" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="ContentContainer"/>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="SelectionStates">
                                <VisualState x:Name="Unselected"/>
                                <VisualState x:Name="Selected">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentContainer">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneAccentBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>