MaterialDesign- Flipper WPF：对齐和缩放是偏斜的。

Question

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

但是，一旦我将此代码放入 Flipper 中，缩放和定位就会倾斜。如果我开始更改窗口的大小，它将有趣地调整大小并且不会很好地堆叠。请参阅下面的图片和视频了解更多信息。谢谢你。

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

Flipper 之外的工作代码：

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

损坏的代码，在 Flipper 中：

 <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 视频演示 - 以红色突出显示的是鳍状肢。

感谢您的任何帮助。

Answer 1

将以下属性添加到您的脚蹼：

 Style="{StaticResource MaterialDesignCardFlipper}"

如果出现（MaterialDesignCardFlipper not found），请在包含翻转器的窗口顶部添加以下代码：

<Window.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Flipper.xaml" />
        </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
</Window.Resources>