在列表框中突出显示当前选定的菜单 Windows Phone 8.1

Question

大家好，我已经使用列表框创建水平菜单，但我遇到了所选菜单未突出显示的问题。

下面是我的XAML页面

<Style x:Key="ListBoxItemStyle1" TargetType="ListBoxItem">
            <Setter Property="Background" Value="{ThemeResource ApplicationPageBackgroundThemeBrush}"/>
            <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="{ThemeResource ApplicationPageBackgroundThemeBrush}" 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"/>
                                            </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.TargetName="ContentContainer"
                                    Storyboard.TargetProperty="Foreground"
                                    Duration="0">
                                                <DiscreteObjectKeyFrame  KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <SolidColorBrush Color="White"/>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames
                                    Storyboard.TargetName="border"
                                    Storyboard.TargetProperty="Background"
                                    Duration="0">
                                                <DiscreteObjectKeyFrame  KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <SolidColorBrush Color="White"/>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <StackPanel x:Name="border" Orientation="Horizontal">
                                <ContentControl x:Name="ContentContainer"  Foreground="{ThemeResource ApplicationForegroundThemeBrush}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}">
                                    <StackPanel x:Name="insidestack"  >
                                        <StackPanel>
                                            <TextBlock Text="{Binding TitleofAccess}" FontWeight="SemiBold" TextAlignment="Center" Margin="10" VerticalAlignment="Center"  FontSize="20" Foreground="{ThemeResource ApplicationForegroundThemeBrush}"  />
                                        </StackPanel>
                                    </StackPanel>
                                </ContentControl>
                            </StackPanel>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

                <ListBox Name="MenuListbox" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" Foreground="{ThemeResource ApplicationForegroundThemeBrush}" ScrollViewer.HorizontalScrollBarVisibility="Hidden" ScrollViewer.VerticalScrollBarVisibility="Disabled" Tapped="MenuListbox_SelectionChanged" ItemContainerStyle="{StaticResource ListBoxItemStyle1}" SelectionMode="Single">
                    <ListBox.ItemsPanel>
                        <ItemsPanelTemplate>
                            <StackPanel Orientation="Horizontal" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
                       HorizontalAlignment="Left"/>
                        </ItemsPanelTemplate>
                    </ListBox.ItemsPanel>
                </ListBox>
            </ScrollViewer>

下面是我附上的数据ItemSource for ListBox

我仍然无法将所选菜单高亮显示。对此的任何帮助都将非常有助于解决这个问题。

提前致谢。

嗨奇拉格

见附件

Answer 1

所以，关于您的模板，我想更改几处。但是，对于您的直接问题，请交换您当前的帧动画；

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="border"
                               Storyboard.TargetProperty="Background"
                               Duration="0">
    <DiscreteObjectKeyFrame KeyTime="0">
       <DiscreteObjectKeyFrame.Value>
          <SolidColorBrush Color="White"/>
       </DiscreteObjectKeyFrame.Value>
    </DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>

直接 ColorAnimation 在正确的 UIElement 目标属性看起来像;

<ColorAnimation Storyboard.TargetName="border" 
                Storyboard.TargetProperty="(UIElement.Background).(SolidColorBrush.Color)"
                Duration="0" To="White" />

希望这对您有所帮助，干杯！

已添加：

因此，因为我几乎从未真正测试过我的答案（我知道这是个坏习惯，但通常它们会是正确的。）在这种情况下，我无论如何都没有时间，但这是我保证会做的工作，无论如何都是更好的形式。

拿走这里的东西；

<StackPanel x:Name="border" Orientation="Horizontal">
                                <ContentControl x:Name="ContentContainer"  Foreground="{ThemeResource ApplicationForegroundThemeBrush}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}">
                                    <StackPanel x:Name="insidestack"  >
                                        <StackPanel>
                                            <TextBlock Text="{Binding TitleofAccess}" FontWeight="SemiBold" TextAlignment="Center" Margin="10" VerticalAlignment="Center"  FontSize="20" Foreground="{ThemeResource ApplicationForegroundThemeBrush}"  />
                                        </StackPanel>
                                    </StackPanel>
                                </ContentControl>
                            </StackPanel>

因为我不明白为什么你会需要这样的 StackPanel 或 ContentControl，所以像这样交换它（最小的变化，但如果是我我会重构所有的）；

<Grid>
<Border x:Name="SelectedState" Background="Red" Visibility="Collapsed">
 <ContentControl x:Name="ContentContainer"  
                 Foreground="{ThemeResource ApplicationForegroundThemeBrush}" 
                 HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" 
                 Margin="{TemplateBinding Padding}" 
                 VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}">

      <TextBlock Text="{Binding TitleofAccess}" FontWeight="SemiBold" TextAlignment="Center" Margin="10" VerticalAlignment="Center"  FontSize="20" Foreground="{ThemeResource ApplicationForegroundThemeBrush}"  />

  </ContentControl>

</Grid>

然后只需切换其中一个边框的可见性即可提供您的背景，如下所示。我们这样做是因为最好切换一个对象，而不是单独切换很多属性（这会出于某种原因向您发出警告）；

<VisualState x:Name="Selected">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="SelectedState">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>

抱歉，我没有时间将内容格式化。但是我想重申一下，很明显你对模板和 VisualStateManager 的工作方式还不熟悉，我会考虑整体重构这个控件，即使它是必要的小改动，因为它的很多部分都没有意义为什么他们按照你的方式完成。干杯

Answer 2

在列表框中添加以下代码。

<ListBox Name="MenuListbox" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" Foreground="{ThemeResource ApplicationForegroundThemeBrush}" ScrollViewer.HorizontalScrollBarVisibility="Hidden" ScrollViewer.VerticalScrollBarVisibility="Disabled" Tapped="MenuListbox_SelectionChanged" ItemContainerStyle="{StaticResource ListBoxItemStyle1}" SelectionMode="Single">
                <ListBox.ItemsPanel>
                    <ItemsPanelTemplate>
                        <StackPanel Orientation="Horizontal" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
                   HorizontalAlignment="Left"/>
                    </ItemsPanelTemplate>
                </ListBox.ItemsPanel>

                <ListBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel x:Name="insidestack">
                        <StackPanel>
                            <TextBlock Text="{Binding TitleofAccess}"
                                       FontWeight="SemiBold"
                                       TextAlignment="Center"
                                       Margin="10"
                                       VerticalAlignment="Center"
                                       FontSize="20"
                                       Foreground="{ThemeResource ApplicationForegroundThemeBrush}" />
                        </StackPanel>
                    </StackPanel>
                </DataTemplate>
            </ListBox.ItemTemplate>
</ListBox>

希望有用。

在列表框中突出显示当前选定的菜单 Windows Phone 8.1

Highlight Currently Selected menu in Listbox Windows Phone 8.1

xaml

windows-phone-8.1