如何突出显示列表框windows phone中的选定项目? [英] How to highlight selected item in list box windows phone?

问题描述

我正在开发一个 Windows Phone 应用程序.我在我的应用程序中放置了列表框控件并显示了一个列表.我需要用蓝色突出显示选定的行.我怎样才能做到这一点 ?.我尝试了一个代码.但它不起作用.我在下面添加了我使用的代码.请帮忙.

I am developing a windows phone application. I placed list box control in my app and displayed a list. I need to highlight the selected row with a blue color. How can I do that ?. I tried a code. But its not working. I add the code I used below. Please help.

<ListBox Margin="0,0,0,0" Name="MyList" ScrollViewer.VerticalScrollBarVisibility="Disabled" ItemContainerStyle="{StaticResource ListBoxItemStyle1}">
                            <ListBox.ItemTemplate>
                                <DataTemplate>
                                    <StackPanel Background="Transparent" Margin="10,0,0,0">

                                            <StackPanel Orientation="Horizontal" HorizontalAlignment="Left" Height="55" Margin="20,10,0,0">
                                                <StackPanel>
                                                    <TextBlock Text="{Binding Option}" FontWeight="Bold" HorizontalAlignment="Left" Foreground="Black" FontSize="23" Margin="0,0,0,0" Width="250" ></TextBlock>
                                                </StackPanel>
                                                <StackPanel Margin="100,0,0,0">
                                                    <Image Margin="0,10,0,0" Source="/Images/arrow.png"></Image>
                                                </StackPanel>
                                            </StackPanel>

                                        <Rectangle Fill="Gray" Height="1" HorizontalAlignment="Stretch" Width="440" />
                                    </StackPanel>
                                </DataTemplate>
                            </ListBox.ItemTemplate>
                        </ListBox>

风格:

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

                            </VisualStateGroup>
                            <VisualStateGroup x:Name="SelectionStates">
                                <VisualState x:Name="Unselected">
                                    <Storyboard>
                                        <ColorAnimation Duration="0" To="White" Storyboard.TargetProperty="(Control.Background).(SolidColorBrush.Color)" Storyboard.TargetName="ContentContainer" />
                                        <ColorAnimation Duration="0" To="White" Storyboard.TargetProperty="(Control.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="ContentContainer" />
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Selected">
                                    <Storyboard>
                                        <ColorAnimation Duration="0" To="Blue" Storyboard.TargetProperty="(Control.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="ContentContainer" />
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="SelectedUnfocused">
                                    <Storyboard>
                                        <ColorAnimation Duration="0" To="Blue" Storyboard.TargetProperty="(Control.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="ContentContainer" />
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Foreground="#FF1BA1E2" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Background="Black" BorderBrush="Black"/>
                    </Border>
                </ControlTemplate>

            </Setter.Value>
        </Setter>
    </Style>

我的列表如下图所示

当我点击选项 2 时.我想更改如下图所示的列表框，并在删除点击时导航到另一个页面.

When I click on the option 2 . I want to change the list box like below image and when remove the click I navigate to another page.

推荐答案

你可以在你的datacontext struct后面添加一个prop "isselected".

you can add a prop "isselected" in your datacontext struct behind.

and += 列表的事件SelectionChanged"

and += the list's event "SelectionChanged"

您可以从句柄 args 中获取上下文数据:

you can get context data from the handle args :

    public IList AddedItems { get; }

    public IList RemovedItems { get; }

改变他们的 isselected 属性.

change their isselected prop.

这篇关于如何突出显示列表框windows phone中的选定项目?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！