如何使用“visualstate”修改xaml中的子usercontrol'

本文关键字：usercontrol xaml 何使用 visualstate 修改 | 更新日期: 2023-09-27 18:07:33

我正在做一些windows 10 UWP应用程序开发，我遇到了一个问题，感谢所有的帮助，吹的是我的代码:

在MainPage.xaml 

<Grid  Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Pivot Style="{StaticResource fuckpivot}" SelectionChanged="Pivot_SelectionChanged">
        <PivotItem>
            <PivotItem.Header>
                <local:test Label="item 3" Glyph="&#xE723;" />
            </PivotItem.Header>
            <Rectangle 
                      x:Name="MyAnimatedRectangle"
                      Width="100" Height="100" Fill="Blue" />
        </PivotItem>
        <PivotItem>
            <PivotItem.Header>
                <local:test Label="item 2" Glyph="&#xE723;" HighLight="Transparent"/>
            </PivotItem.Header>
            <!--<Rectangle x:Name="MyTest" Width="100" Height="100" Fill="red"/>-->
        </PivotItem>
    </Pivot>
</Grid>

和我的"testControl":

   <Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="10"/>
    </Grid.RowDefinitions>
    <StackPanel Grid.Row="0">
        <FontIcon
                        HorizontalAlignment="Center"
                        Margin="0,12,0,0"
                        Glyph="{Binding Glyph}"
                        FontSize="16" />
        <TextBlock
                        FontFamily="Segoe UI"
                        Text="{Binding Label}"
                        Style="{StaticResource CaptionTextBlockStyle}"
                        LineStackingStrategy="BlockLineHeight"
                        LineHeight="14"
                        MaxLines="2"
                        IsTextScaleFactorEnabled="False"
                        TextAlignment="Center"
                        HorizontalAlignment="Center"
                        Margin="2,5,2,7" />
    </StackPanel>
    <Grid Grid.Row="1">
        <Border BorderThickness="0,0,0,2" VerticalAlignment="Bottom" BorderBrush="Red"/>
    </Grid>
</Grid>

所以，我的问题是:如何改变子UserControl名为"test"的高亮颜色?(当枢轴更改为当前索引时，如何编写可视化状态?)

如何使用“visualstate”修改xaml中的子usercontrol'

我已经在WP8.1 RunTime上测试了它，但在这种情况下，我相信它没有改变那么多。下面的示例使用VisualStateManager将Label.Foreground更改为Green。代码大部分是用XAML编写的，如下所示:

主页:

<Grid  Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Pivot SelectionChanged="Pivot_SelectionChanged">
        <PivotItem>
            <PivotItem.Header>
                <local:testControl Label="item 3" Glyph="&#xE723;" />
            </PivotItem.Header>
            <Rectangle 
                  x:Name="MyAnimatedRectangle"
                  Width="100" Height="100" Fill="Blue" />
        </PivotItem>
        <PivotItem>
            <PivotItem.Header>
                <local:testControl Label="item 2" Glyph="&#xE723;"/>
            </PivotItem.Header>
        </PivotItem>
    </Pivot>
</Grid>

testControl: 

<Grid>        
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="SelectionStates">
            <VisualState x:Name="Unselected"/>
            <VisualState x:Name="Selected">
                <Storyboard>
                    <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Foreground" Storyboard.TargetName="MyLabel">
                        <DiscreteObjectKeyFrame KeyTime="0" Value="Green"/>
                    </ObjectAnimationUsingKeyFrames>
                </Storyboard>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="10"/>
    </Grid.RowDefinitions>
    <StackPanel Grid.Row="0">
        <FontIcon   HorizontalAlignment="Center" Margin="0,12,0,0" Glyph="{Binding Glyph}" FontSize="16" />
        <TextBlock x:Name="MyLabel" FontFamily="Segoe UI" Text="{Binding Label}" LineStackingStrategy="BlockLineHeight" LineHeight="14"
                   TextAlignment="Center" HorizontalAlignment="Center" Margin="2,5,2,7" />
    </StackPanel>
    <Grid Grid.Row="1">
        <Border BorderThickness="0,0,0,2" VerticalAlignment="Bottom" BorderBrush="Red"/>
    </Grid>
</Grid>

要使此工作，您只需在pivot选择更改时更改VisualStates -这在MainPage后面的代码中:

private void Pivot_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    if (e.RemovedItems.Count > 0)
        VisualStateManager.GoToState((e.RemovedItems.First() as PivotItem).Header as testControl, "Unselected", true);
    if (e.AddedItems.Count > 0)
        VisualStateManager.GoToState((e.AddedItems.First() as PivotItem).Header as testControl, "Selected", true);
}

你也应该在MSDN上找到更多的帮助，可能在一些博客和文章中找到更多的帮助。

相关文章：