我正在制作一个 UWP 项目,当我在 Windows 上浏览我的设置应用程序时,我意识到每当我按下按钮时就会有一条蓝线移动。 我想在 UWP 中为我的项目重新制作它,因为它看起来不错。 但每当动画播放时,它都会在实际按钮下方移动 100 epx。
为什么?
Xaml 脚本:
<Page
x:Class="Library.Views.MainMenuView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Library.Helpers"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Background="{ThemeResource ApplicationBackgroundBrush}">
<Grid>
<Border HorizontalAlignment="Left" MaxWidth="400" MinWidth="200" Width="Auto" Height="Auto" Background="{ThemeResource ControlBackgroundBrush}" BorderBrush="{ThemeResource ControlHoveredBorderBrush}" BorderThickness="1" CornerRadius="0,8,8,0" >
<StackPanel x:Name="Buttons">
<Button x:Name="Home" Style="{StaticResource UIButtonStyle}" Width="300" Height="40" FontSize="20" HorizontalAlignment="Center" Margin="5,8,12,8" Click="Button_Click">
<StackPanel Orientation="Horizontal" VerticalAlignment="Center">
<Image Source="/Assets/HomeNoBGRes.png" Width="35" Height="30" Margin ="0,0,10,0" Stretch="Fill"/>
<TextBlock Text="Home" FontSize="20" Width="240"/>
</StackPanel>
</Button>
<Button x:Name="Projects" Style="{StaticResource UIButtonStyle}" Width="300" Height="40" FontSize="20" HorizontalAlignment="Center" Margin="5,8,12,8" Click="Button_Click">
<StackPanel Orientation="Horizontal" VerticalAlignment="Center">
<Image Source="/Assets/ProjectsNoBGRes.png" Width="30" Height="30" Margin ="0,0,10,0" Stretch="Fill"/>
<TextBlock Text="My Projects" FontSize="20" Width="240"/>
</StackPanel>
</Button>
<Border Background="{ThemeResource ControlHoveredBackgroundBrush}" Width="270" Height="5" CornerRadius="3" HorizontalAlignment="Center"/>
<Button x:Name="Documents" Style="{StaticResource UIButtonStyle}" Width="300" Height="40" FontSize="20" HorizontalAlignment="Center" Margin="5,8,12,8" Click="Button_Click">
<StackPanel Orientation="Horizontal" VerticalAlignment="Center">
<Image Source="/Assets/DocsNoBGRes.png" Width="30" Height="30" Margin ="0,0,10,0" Stretch="Fill"/>
<TextBlock Text="Documents" FontSize="20" Width="240"/>
</StackPanel>
</Button>
<Button x:Name="Paper" Style="{StaticResource UIButtonStyle}" Width="300" Height="40" FontSize="20" HorizontalAlignment="Center" Margin="5,8,12,8" Click="Button_Click">
<StackPanel Orientation="Horizontal" VerticalAlignment="Center">
<Image Source="/Assets/PaperNoBGRes.png" Width="30" Height="30" Margin ="0,0,10,0" Stretch="Fill"/>
<TextBlock Text="Paper" FontSize="20" Width="240"/>
</StackPanel>
</Button>
</StackPanel>
</Border>
<Border x:Name="SelectionIndicator" Visibility="Collapsed" Background="{ThemeResource SystemAccentColor}" Height="30" Width="5" CornerRadius="3" HorizontalAlignment="Left" Margin="5,0,0,0"/>
</Grid>
</Page>
和 C# 动画函数:
private void Button_Click(object sender, RoutedEventArgs e)
{
if (SelectionIndicator.Visibility == Visibility.Collapsed) SelectionIndicator.Visibility = Visibility.Visible;
if (sender is Button clickedButton)
{
double indicatorLeft = clickedButton.TransformToVisual(Buttons).TransformPoint(new Point(0, 0)).Y;
if (SelectionIndicator.RenderTransform is null || !(SelectionIndicator.RenderTransform is CompositeTransform)) SelectionIndicator.RenderTransform = new CompositeTransform();
CompositeTransform transform = SelectionIndicator.RenderTransform as CompositeTransform;
Storyboard storyboard = new Storyboard();
DoubleAnimation moveAnimation = new DoubleAnimation
{
To = indicatorLeft,
Duration = TimeSpan.FromSeconds(0.5),
EnableDependentAnimation = true,
EasingFunction = new CircleEase { EasingMode= EasingMode.EaseInOut },
};
Storyboard.SetTarget(moveAnimation, transform);
Storyboard.SetTargetProperty(moveAnimation, "TranslateY");
storyboard.Children.Add(moveAnimation);
storyboard.Begin();
}
}
这是一张展示我的问题的图片:
我尝试在边框上添加网格,因为可能是因为它们不在同一个容器中造成的,但没有。
提前致谢!
(致版主:不要删除我的提前感谢,这些是为了感谢那些真正帮助我的人)
出现此行为的原因是
SelectionIndicator
默认位于左侧居中,设置Visibility="Visible"
后即可看到其位置。
建议在 SelectionIndicator 中添加
VerticalAlignment="Top"
。并将 StackPanel
与 Orientation="Horizontal"
一起使用。
以下是我的测试代码,删除了一些样式。
<Grid>
<StackPanel Orientation="Horizontal">
<Border x:Name="SelectionIndicator" Visibility="Collapsed" Background="{ThemeResource SystemAccentColor}" Height="40" Width="5" CornerRadius="3" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="5,0,0,0"/>
<Border HorizontalAlignment="Left" MaxWidth="400" MinWidth="200" Width="Auto" Height="Auto" BorderThickness="1" CornerRadius="0,8,8,0" >
<StackPanel x:Name="Buttons">
<Button x:Name="Home" Width="300" Height="40" FontSize="20" HorizontalAlignment="Center" Margin="5,8,12,8" Click="Button_Click">
<StackPanel Orientation="Horizontal" VerticalAlignment="Center">
<Image Source="/Assets/HomeNoBGRes.png" Width="35" Height="30" Margin ="0,0,10,0" Stretch="Fill"/>
<TextBlock Text="Home" FontSize="20" Width="240"/>
</StackPanel>
</Button>
<Button x:Name="Projects" Width="300" Height="40" FontSize="20" HorizontalAlignment="Center" Margin="5,8,12,8" Click="Button_Click">
<StackPanel Orientation="Horizontal" VerticalAlignment="Center">
<Image Source="/Assets/ProjectsNoBGRes.png" Width="30" Height="30" Margin ="0,0,10,0" Stretch="Fill"/>
<TextBlock Text="My Projects" FontSize="20" Width="240"/>
</StackPanel>
</Button>
<Border Width="270" Height="5" CornerRadius="3" HorizontalAlignment="Center"/>
<Button x:Name="Documents" Width="300" Height="40" FontSize="20" HorizontalAlignment="Center" Margin="5,8,12,8" Click="Button_Click">
<StackPanel Orientation="Horizontal" VerticalAlignment="Center">
<Image Source="/Assets/DocsNoBGRes.png" Width="30" Height="30" Margin ="0,0,10,0" Stretch="Fill"/>
<TextBlock Text="Documents" FontSize="20" Width="240"/>
</StackPanel>
</Button>
<Button x:Name="Paper" Width="300" Height="40" FontSize="20" HorizontalAlignment="Center" Margin="5,8,12,8" Click="Button_Click">
<StackPanel Orientation="Horizontal" VerticalAlignment="Center">
<Image Source="/Assets/PaperNoBGRes.png" Width="30" Height="30" Margin ="0,0,10,0" Stretch="Fill"/>
<TextBlock Text="Paper" FontSize="20" Width="240"/>
</StackPanel>
</Button>
</StackPanel>
</Border>
</StackPanel>