Question

我是Windows Phone 7的新手，我有一个疑问：如何在动态创建的列表框中为选定项添加复选标记。如果用户单击列表框中的另一个项目，则复选标记会将其位置移动到所选项目。怎么做？我的代码如下所示： XAML代码：

<ListBox Height="669" HorizontalAlignment="Left" Name="listBox1" VerticalAlignment="Top" Width="479" Margin="1,-3.5,0,0" SelectionChanged="listBox1_SelectionChanged" Background="White">
            <ListBox.ItemTemplate>
                <DataTemplate >
                    <Border BorderThickness="0,0,0,1.2" BorderBrush="Black" Width="480" >
                    <StackPanel Background="White" Name="stackpanel1" Width="480" Orientation="Horizontal">
                        <TextBlock Text="{Binding name}"  Height="62" Width="390" FontSize="40" FontFamily="Arial" Foreground="Black" TextAlignment="Left" VerticalAlignment="Center" />
                    </StackPanel>
                    </Border>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>

CS代码：

 public class list
    {
        public string name { get; set; }

    }

foreach (string s in array)
                {
                    list obj = new list();
                    obj.name = s;
                    listBox1.Items.Add(obj);
                }

请指导我一些代码。谢谢。

Answer 1

纯粹基于XAML的解决方案就是：

您的特定于应用程序的代码将是这样的：

<ListBox ItemsSource="{Binding}">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding}"/>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

您的列表框的样式将采用XAML术语（复制粘贴并更改＆＃39; someIcon.png＆＃39;以下为您要使用的图标的名称）：

<phone:PhoneApplicationPage.Resources>
    <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="Green"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="SelectionIcon">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Visibility>Visible</Visibility>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                    <StackPanel Orientation="Horizontal">
                        <Border Width="80" Height="80">
                            <Image Name="SelectionIcon" Source="someIcon.png" Visibility="Collapsed"/>
                        </Border>
                        <ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
                    </StackPanel>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</phone:PhoneApplicationPage.Resources>

更新1：

添加图片以说明我对以下构建操作的评论。

enter image description here

Answer 2

为您的数据模板创建用户控件。在您的usercontrol中添加一个支票图像或荧光笔，并在用户点击相应的项目时切换其可见性。多数民众赞成我也做了。我希望它有所帮助。

如下所示：

User control

                <Border BorderThickness="0,0,0,1.2" BorderBrush="Black" Width="480" >
                <StackPanel Background="White" Name="stackpanel1" Width="480" Orientation="Horizontal">
                    <Image x:Name="checkImg" Source="check" Visibility="Collapsed">
                    <TextBlock Text="{Binding name}"  Height="62" Width="390" FontSize="40" FontFamily="Arial" Foreground="Black" TextAlignment="Left" VerticalAlignment="Center" />
                </StackPanel>
                </Border>

和listbox现在：

        <ListBox Height="669" HorizontalAlignment="Left" Name="listBox1" VerticalAlignment="Top" Width="479" Margin="1,-3.5,0,0" SelectionChanged="listBox1_SelectionChanged" Background="White">
        <ListBox.ItemTemplate>
            <DataTemplate >
                <user:control></user:control>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>

在selectionchaged事件中，将项目解压缩为ListBoxItem并切换其可见性。

存储所选项目的旧项目，当您选择其他项目时，将旧项目的可见性设置为false，将新项目设置为true。

如何在列表框中的选定项目上添加复选标记

2 个答案: