MaterialDesign - Flipper WPF: Выравнивание и смещение наклонены. - PullRequest
Новая
       9

MaterialDesign - Flipper WPF: Выравнивание и смещение наклонены.

0 голосов
/ 12 мая 2018

Я использую Material Design в приложении WPF XAML, у меня есть этот фрагмент кода ниже, когда сетка находится за пределами "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 - тот, что выделен красным, это флиппер.

Спасибо за любую помощь.

...