Strangle bug while not render PNG file in UWP

Question

Here is the XAML:

<Page
    x:Class="App1.InputBoxPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App1"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">        
    <Grid>
        <Rectangle Fill="Black" Opacity="1"></Rectangle>
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="0.3*"></RowDefinition>
                <RowDefinition Height="0.4*"></RowDefinition>
                <RowDefinition Height="0.3*"></RowDefinition>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="0.3*"></ColumnDefinition>
                <ColumnDefinition Width="0.4*"></ColumnDefinition>
                <ColumnDefinition Width="0.3*"></ColumnDefinition>
            </Grid.ColumnDefinitions>
            <Grid Grid.Column="1" Grid.Row="1">
                <Grid.RowDefinitions>
                    <RowDefinition Height="0.7*"></RowDefinition>
                    <RowDefinition Height="0.1*"></RowDefinition>
                    <RowDefinition Height="0.2*"></RowDefinition>
                </Grid.RowDefinitions>
                <Image Source="/Image/MessageBox.png" VerticalAlignment="Top"></Image>
                <Grid Grid.Row="2">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="0.1*"></ColumnDefinition>
                        <ColumnDefinition Width="0.3*"></ColumnDefinition>
                        <ColumnDefinition Width="0.2*"></ColumnDefinition>
                        <ColumnDefinition Width="0.3*"></ColumnDefinition>
                        <ColumnDefinition Width="0.1*"></ColumnDefinition>
                    </Grid.ColumnDefinitions>
                    <Button Grid.Column="1" Content="OK" IsTabStop="False" HorizontalAlignment="Center" Name="InputBoxButtonYes">
                        <Button.Template>
                            <ControlTemplate>
                                <Grid Name="G">
                                    <VisualStateManager.VisualStateGroups>
                                        <VisualStateGroup x:Name="CommonStates">
                                            <VisualState x:Name="Normal">
                                                <VisualState.Setters>
                                                </VisualState.Setters>
                                            </VisualState>
                                            <VisualState x:Name="PointerOver">
                                                <VisualState.Setters>
                                                    <Setter Value="0.8" Target="G.Opacity"></Setter>
                                                </VisualState.Setters>
                                            </VisualState>
                                        </VisualStateGroup>
                                    </VisualStateManager.VisualStateGroups>
                                    <Image Source="/Image/MessageBoxButton.png"></Image>
                                    <ContentPresenter FontSize="20" Foreground="#37f4ff" VerticalContentAlignment="Center" HorizontalContentAlignment="Center"></ContentPresenter>
                                </Grid>
                            </ControlTemplate>
                        </Button.Template>
                    </Button>
                    <Button Grid.Column="3" Content="Cancel" IsTabStop="False" HorizontalAlignment="Center" Name="InputBoxButtonNo">
                        <Button.Template>
                            <ControlTemplate>
                                <Grid Name="G">
                                    <VisualStateManager.VisualStateGroups>
                                        <VisualStateGroup x:Name="CommonStates">
                                            <VisualState x:Name="Normal">
                                                <VisualState.Setters>
                                                </VisualState.Setters>
                                            </VisualState>
                                            <VisualState x:Name="PointerOver">
                                                <VisualState.Setters>
                                                    <Setter Value="0.8" Target="G.Opacity"></Setter>
                                                </VisualState.Setters>
                                            </VisualState>
                                        </VisualStateGroup>
                                    </VisualStateManager.VisualStateGroups>
                                    <Image Source="/Image/MessageBoxButton.png" RenderTransformOrigin="0.5,0.5">
                                        <Image.RenderTransform>
                                            <ScaleTransform ScaleX="-1"></ScaleTransform>
                                        </Image.RenderTransform>
                                    </Image>
                                    <ContentPresenter FontSize="20" Foreground="#37f4ff" VerticalContentAlignment="Center" HorizontalContentAlignment="Center"></ContentPresenter>
                                </Grid>
                            </ControlTemplate>
                        </Button.Template>
                    </Button>
                </Grid>
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition></RowDefinition>
                        <RowDefinition></RowDefinition>
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="0.2*"></ColumnDefinition>
                        <ColumnDefinition Width="0.6*"></ColumnDefinition>
                        <ColumnDefinition Width="0.2*"></ColumnDefinition>
                    </Grid.ColumnDefinitions>
                    <TextBox Foreground="#FF37F4FF" Name="InputBoxContent" Background="#00FF0000" Grid.Column="1" HorizontalAlignment="Stretch" VerticalAlignment="Center" TextAlignment="Center" FontSize="15" BorderThickness="0,0,0,2" BorderBrush="#FF37F4FF" Template="{StaticResource TextBoxControlTemplate}"></TextBox>
                    <TextBlock Foreground="#17f98a" Name="InputBoxTitle" Grid.Column="1" Grid.Row="1" HorizontalAlignment="Center" VerticalAlignment="Center" TextWrapping="Wrap" FontSize="20" TextAlignment="Center">Input your code</TextBlock>
                    <!--<TextBox Grid.Column="1" Name="InputBoxContent"></TextBox>-->
                </Grid>
            </Grid>
        </Grid>
    </Grid>
</Page>

I made a new page as above.
When it runs,it turn out to be this:


As you see,the png of cancel button do not render.
However,when I resized the window,the png of cancel rendered successfully as below:

Meanwhile,I found the bug has no rules,sometimes it will render properly, sometimes it will not render as I said above until resize the window.

What's wrong with this?I am nearly crazy for I even do know what curse it.

Answer 1

I did it as @Johnny Westlake said,removing the -1 Scale Render Transform and using Photoshop to flip the image then add it to prject.

After did it I ran several times,and the bug no more occur.

It seems that truely is bugs in UWP and microsoft do not repair it till now.

First and last,thanks for @Johnny Westlake's help.

Thank you.