c# - MaterialDesign- Flipper WPF：对齐和缩放是倾斜的。

Question

我在 WPF XAML 应用程序中使用Material Design，我有这部分代码，当网格在“materialDesign：Flipper”之外时，它都会正确呈现；即 - 它随着窗口的大小正确增长/拉伸，并且它很好地堆叠在 StackPanel 内。

但是，一旦我将此代码放在 Flipper 中，缩放和定位就会出现偏差。如果我开始更改窗口的大小，它会有趣地调整大小并且不会很好地堆叠。请参阅下面的图像和视频以获取更多信息。谢谢你。

请注意，所有这些代码都包含在“StackPanel”的一侧，其目的是可以多次复制和粘贴它们。

鳍状肢外的工作代码：

<Grid Height="89">
    <Grid Width="77" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="7,3,0,2"  Panel.ZIndex="2" Height="84">
        <Ellipse Fill="{Binding Colour}" HorizontalAlignment="Left" Height="77" StrokeThickness="3" Stroke="#FF464646" Width="77" Effect="{DynamicResource MaterialDesignShadowDepth2}"  />
        <TextBlock Text="{Binding Name}"  VerticalAlignment="Center" HorizontalAlignment="Center" TextAlignment="Center" Width="90" FontSize="{Binding FontSize}" Foreground="White" />
    </Grid>
    <UniformGrid  Rows="2" Columns="1" Panel.ZIndex="3" Margin="89,18,72,0">
        <TextBox TextWrapping="Wrap" Text="{Binding BrandName}"  FontSize="24" Grid.ColumnSpan="1"/>
        <Label Content="Brand Name" Grid.ColumnSpan="1" Grid.RowSpan="2" Margin="-2,-3,2,3"/>
     </UniformGrid>
    <Button Style="{StaticResource MaterialDesignFloatingActionMiniDarkButton}" HorizontalAlignment="Right" Panel.ZIndex="4" Content="{materialDesign:PackIcon DotsHorizontal}" Command="{x:Static materialDesign:Flipper.FlipCommand}" Margin="0,25,19,24"/>
    <materialDesign:Card  Margin="24,0,5,5" VerticalAlignment="Bottom" Height="72" Panel.ZIndex="-1" />
</Grid>

脚蹼内的破代码：

 <materialDesign:Flipper Visibility="{Binding IsVisible}" Background="#FFE89595" HorizontalAlignment="Stretch">
    <materialDesign:Flipper.FrontContent>
        Grid Height="89">
            <Grid Width="77" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="7,3,0,2"  Panel.ZIndex="2" Height="84">
                <Ellipse Fill="{Binding Colour}" HorizontalAlignment="Left" Height="77" StrokeThickness="3" Stroke="#FF464646" Width="77" Effect="{DynamicResource MaterialDesignShadowDepth2}"  />
                <TextBlock Text="{Binding Name}"  VerticalAlignment="Center" HorizontalAlignment="Center" TextAlignment="Center" Width="90" FontSize="{Binding FontSize}" Foreground="White" />
            </Grid>
            <UniformGrid  Rows="2" Columns="1" Panel.ZIndex="3" Margin="89,18,72,0">
                <TextBox TextWrapping="Wrap" Text="{Binding BrandName}"  FontSize="24" Grid.ColumnSpan="1"/>
                <Label Content="Brand Name" Grid.ColumnSpan="1" Grid.RowSpan="2" Margin="-2,-3,2,3"/>
             </UniformGrid>
            <Button Style="{StaticResource MaterialDesignFloatingActionMiniDarkButton}" HorizontalAlignment="Right" Panel.ZIndex="4" Content="{materialDesign:PackIcon DotsHorizontal}" Command="{x:Static materialDesign:Flipper.FlipCommand}" Margin="0,25,19,24"/>
            <materialDesign:Card  Margin="24,0,5,5" VerticalAlignment="Bottom" Height="72" Panel.ZIndex="-1" />
        </Grid>
    </materialDesign:Flipper.FrontContent>
    <materialDesign:Flipper.BackContent>
        <Grid Height="200" Background="{Binding BackColour}">
            <Button Style="{StaticResource MaterialDesignFloatingActionMiniDarkButton}" Content="{materialDesign:PackIcon DotsHorizontal}" Command="{x:Static materialDesign:Flipper.FlipCommand}"/>
        </Grid>
    </materialDesign:Flipper.BackContent>
</materialDesign:Flipper>

渲染示例图像

YouTube 视频演示 - 以红色突出显示的是鳍状肢。

感谢您的任何帮助。

标签： c#wpfxamlmaterial-design-in-xaml