Namespaces

Variants
Actions

Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries over the next few weeks. Thanks for all your past and future contributions.

创建类似CheckBoxGroup的多选ListBox

From Wiki
Jump to: navigation, search
WP Metro Icon UI.png
SignpostIcon XAML 40.png
SignpostIcon WP7 70px.png
Article Metadata

代码示例
兼容于
文章
Xinx Gong 在 22 Oct 2012 创建
最后由 hamishwillee 在 03 Jul 2013 编辑

Contents

介绍

1.新建一个Windows Phone Application工程,命名为MultiListBoxSample。

2.新建示例数据源。

i.在工程中添加如下的类。

public class SampleData 
{
public SampleData()
{
items.Add("刘备");
items.Add("关羽");
items.Add("张飞");
items.Add("赵云");
items.Add("黄忠");
items.Add("马超");
}
 
private ObservableCollection<string> _items;
public ObservableCollection<string> items
{
get
{
if (null == _items)
{
_items = new ObservableCollection<string>();
}
return _items;
}
}
}

ii.在MainPage.xaml文件中添加命名空间的引用:

xmlns:local="clr-namespace:MultiListBoxSample"

iii.在MainPage.xaml中新建资源:

<phone:PhoneApplicationPage.Resources> 
<local:SampleData x:Key="sampleData"/>
</phone:PhoneApplicationPage.Resources>

3.在页面中加入一个ListBox,设置选中方式为多选,并为其指定DataContext和ItemsSource。

<ListBox DataContext="{StaticResource sampleData}" ItemsSource="{Binding items}" SelectionMode="Multiple"/>

4.当前已经完成了ListBox的多选功能,但是为了能直观显示,我们可以加上一个类似CheckBox的壳。

i.创建ListBoxItemStyle。如下图:

Multilistbox pic 0.png

ii.在模版中可以看见LayoutRoot(Border类型)和ContentContainer(ContentControl类型)。我们可以在这个模版中加上一个CheckBox,并设置该CheckBox不可点击(IsHitTestVisible="False")如下图所示。

Multilistbox pic 1.png

iii.为了使CheckBox能显示当前的选中状态,我们还需要在State中做一些处理。

Multilistbox pic 2.png
SelectedUnfocused:ListBox失去焦点时的选中Item的状态
Unselected:非选中Item状态
Selected:ListBox获得焦点时的选中Item状态

在SelectedUnfocusd和Selected状态设置CheckBox选中,Unselected状态设置CheckBox不选中。

iv.最终完成的ListBoxItemStyle代码如下:

<Style x:Key="ListBoxItemStyle1" 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">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(ToggleButton.IsChecked)" Storyboard.TargetName="checkBox">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<System:Boolean>False</System:Boolean>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Selected">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentContainer">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneAccentBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(ToggleButton.IsChecked)" Storyboard.TargetName="checkBox">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<System:Boolean>True</System:Boolean>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="SelectedUnfocused">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(ToggleButton.IsChecked)" Storyboard.TargetName="checkBox">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<System:Boolean>True</System:Boolean>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid>
<CheckBox x:Name="checkBox" IsHitTestVisible="False"/>
</Grid>
<ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" d:LayoutOverrides="Width, Height" Grid.Column="1" VerticalAlignment="Center"/>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

5.完成以上步骤就完成了一个类似CheckBoxGroup的多选ListBox。

运行结果和源代码

Multilistbox pic 3.png

源代码: File:Multilistbox sample.zip

This page was last modified on 3 July 2013, at 03:54.
110 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×