我正在制作一个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();
            }
        }

这是一张展示我的问题的图片:

Object is below goal

我试着在边框上添加一个网格,因为这可能是因为它们不在同一个容器中,但不是.

提前谢谢!

(致版主:不要抹杀我对预付款的感谢,这些是为了感谢那些真正帮助我的人)

推荐答案

出现此行为的原因是默认情况下SelectionIndicator位于左侧中心,设置Visibility="Visible"后可以看到其位置.

enter image description here

建议在SelectionIndicator中添加VerticalAlignment="Top".并使用StackPanelOrientation="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>
 

Csharp相关问答推荐

Blazor:用参数创建根路径

EF Core Fluent API中定义的多对多关系

有没有办法把+02:00转换成TimeSpan?""

如何注册接口类型,类型<>

Appsettings.json未加载.Net 8 Blaazor Web程序集

如何将ASP.NET Core 2.1(在.NET框架上运行)更新到较新的版本?

如何通过属性初始化器强制初始化继承记录内的属性?

调用Task.Run()与DoSomethingAsync()有什么不同?

从另一个不同 struct 的数组创建Newtonsoft.Json.Linq.J数组

Lambda表达式如何与隐式强制转换一起工作?

为什么Docker中没有转发该端口?

正在从最小API-InvocationConext.Arguments中检索参数的FromBodyAttribute

C#无法将.csv列转换为用于JSON转换的列表

使用可空引用类型时C#接口实现错误

FakeItEasy自动嘲弄内容

如何在C#.NET桌面应用程序中动态更改焦点工具上的后退 colored颜色

在ObservableCollection上使用[NotifyPropertyChangedFor()]源代码生成器不会更新UI

如何在特定时间间隔运行多个后台任务?

ASP.NET核心中的授权,如何在DbContext启动之前提供租用ID

反序列化我以前使用System.Text.Json序列化的文件时出现异常