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

感谢您的帮助。

Answer 1

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

 Style="{StaticResource MaterialDesignCardFlipper}"

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

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