microsoft / microsoft-ui-xaml

Windows UI Library: the latest Windows 10 native controls and Fluent styles for your applications
MIT License
6.36k stars 678 forks source link

SVG Image sources behave unpredictably. #825

Open Noemata opened 5 years ago

Noemata commented 5 years ago

The image below below:

image

Is produced with the following XAML:

        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <Grid x:Name="VersionStack" x:FieldModifier="public" Grid.Row="0">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="64"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                </Grid.RowDefinitions>
                <TextBlock Grid.Row="0" Text="InformationxR" Style="{StaticResource SubtitleTextBlockStyle}" Margin="0,0,0,10" />
                <Image Grid.Row="1" Width="300" Height="160" Source="/Assets/InformationxR.svg" Stretch="UniformToFill" HorizontalAlignment="Left" Margin="20,0,0,0" />
                <TextBlock Grid.Row="2" Text="Version" Style="{StaticResource SubtitleTextBlockStyle}" />
                <TextBlock Grid.Row="3" Margin="20,10,0,10" x:Name="Version" Foreground="{ThemeResource ApplicationSecondaryForegroundThemeBrush}" />
                <TextBlock Grid.Row="4" Text="Copyright © 2019 by" TextWrapping="Wrap" Style="{StaticResource SubtitleTextBlockStyle}" />
                <HyperlinkButton Grid.Row="5"  NavigateUri="http://www.imajion.com">
                    <Image Width="480" Height="300" Source="/Assets/ImajionLogo.svg" Stretch="Uniform" HorizontalAlignment="Left" Margin="14.5,-110,0,0" />
                </HyperlinkButton>
                <RichTextBlock Grid.Row="6" HorizontalAlignment="Left" Margin="20,-110,0,0">
                    <Paragraph FontSize="20" Foreground="{ThemeResource ApplicationSecondaryForegroundThemeBrush}" FontWeight="Normal" FontStyle="Normal" FontStretch="Normal" TextAlignment="Left">
                        <Run />
                        All rights reserved.
                    </Paragraph>
                </RichTextBlock>
            </Grid>
        </Grid>
    </Grid>

For the second SVG image, we're having to muck with Margin settings to get an approximation of the result we expect to get without such adjustments. The SVG image behaves correctly in every SVG editing tool we've tried, including all Adobe products, and Inkscape.

We encountered poor placement behaviour with many different SVG images. Occasionally, it almost works correctly, like the case with the first SVG image above, though adjusting centering has never worked as expected. Please provide an example of the test suite you use to qualify that this is working. We've never gotten proper placement to work as expected with anything but the simplest of SVG images.