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

大家好,， 我使用列表框创建了水平菜单，我面临的问题是所选菜单没有突出显示

下面是我的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>

下面是我的数据，如附件所示

我仍然无法将所选菜单作为突出显示的菜单。在这方面的任何帮助都将非常有助于克服这个问题

先谢谢你

嗨，希拉格

---

请参阅附件

因此，关于您的模板设置，我有几点需要更改。但是，对于您的直接问题，请交换当前帧动画

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

希望这有帮助，干杯

增加：

因此，由于我几乎从未真正测试过我的答案（我知道这是一个坏习惯，但通常情况下它们都是正确的）。在这种情况下，我没有时间去做任何事情，但下面是我要做的事情，这保证了我的答案是有效的，而且是更好的形式

拿着这里的东西

<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，就这样交换它（最小的更改，但如果是我，我会重构所有的）

然后只需切换其中一个边框的可见性，以提供如下所示的背景。我们这样做是因为最好切换一个对象，而不是单独切换许多属性（这会给您警告，因为这样做是有原因的）

---

对不起，我没有时间把东西格式化。不过，我想重申一下，很明显，您对模板和VisualStaseMaMaGER的工作是新的，我会考虑重构这个控件，即使它是必要的小改动，因为它占据了很多部分，对于为什么它们按照您的方式进行操作是没有意义的。干杯

所以，关于你的模板设置，有几点我想改变。但是，对于您的直接问题，请交换当前帧动画

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

希望这有帮助，干杯

增加：

因此，由于我几乎从未真正测试过我的答案（我知道这是一个坏习惯，但通常情况下它们都是正确的）。在这种情况下，我没有时间去做任何事情，但下面是我要做的事情，这保证了我的答案是有效的，而且是更好的形式

拿着这里的东西

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

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