WPF XAML: Fill Rectangle with color blue and within an image and text in center X,Y

Question

I have rectangle below which mission is to overlay above all other controls in the grid:

<Grid>
        <Rectangle x:Name="TopPanel" Grid.ZIndex="3"  Opacity="0.5">
            <Rectangle.Fill>                
                    <ImageBrush ImageSource="./Resources/Loader_128x128.gif"  AlignmentX="Center"  AlignmentY="Center" Stretch="None" />                
            </Rectangle.Fill>
        </Rectangle>


       <!-- Controls -->

</Grid>

I would like this rectangle to have in its center (X,Y) an image and under the image (also centered in horizontal) a text saying "Loading..." The image I have put is an animated gif.

How can I do this? I am only interested in XAML, not c# code.

Another problem I have is that my gif is not being animated. Why? In order to make gif animation work, I do not want to use extra packages.

Please, stop downvoting and if so say why. Are you Clemens? – Willy Jul 02 '17 at 19:28 — Willy, Jul 02 '17 at 19:28

score 0 · Answer 1 · answered Jul 02 '17 at 21:13

Am not sure you can place animated gif inside ImageBrush(you will see the image but not the animation), if you dont want Code or external packages(i recommend you use external packages) you need to use MediaElement.

I removed the rectangle because i didn't understand why you need it from your description.

<Window x:Class="wpftest.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:wpftest"
    mc:Ignorable="d"
    Title="MainWindow" Height="350" Width="525">
<Grid>

    <Border Opacity="0.5" Grid.ZIndex="3">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
            <MediaElement Height="300" Width="300"
                   Source="c:\us\Resources\loader.gif" 
                   LoadedBehavior="Play" 
                   Stretch="Uniform" SpeedRatio="1" IsMuted="False" />
            <TextBlock Grid.Row="1" Text="Loading..." HorizontalAlignment="Center"/>

        </Grid>
    </Border>

    <!-- Controls -->
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <TextBox/>
        <Label Grid.Row="1" Content="Some Label"></Label>
        <TextBox Grid.Row="2"/>

    </Grid>

  </Grid>

score 0 · Answer 2 · answered Jul 02 '17 at 23:37

About the animated gif's: AFAIK it is not supported directly, you'll need a library.I use a library called WpfAnimatedGif. You'll find it on nuget https://www.nuget.org/packages/WpfAnimatedGif/ After installing it, something like : <Image gif:ImageBehavior.AnimatedSource="./Resources/Loader_128x128.gif"/>

sould do the job.

score 0 · Answer 3 · answered Jul 03 '17 at 10:54

kojan is right the problem with the gif it will animate only once so you can use also animation storyboard... (you can put the loading spinner container after the controls and don't use zindex)

<Window x:Class="wpf.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:wpf"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
    <Grid>
        <UniformGrid Columns="1">
            <Button Content="Don't" Background="Blue"/>
            <Button Content="DownGrade Me"  Background="White"/>
            <Button Content="Please"  Background="Blue"/>
        </UniformGrid>
    </Grid>
    <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
            <Grid.RowDefinitions>
                <RowDefinition />
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
            <MediaElement Name="MySimpsons" Source="C:\Users\CodeValueUser\documents\visual studio 2015\Projects\wpf\wpf\homer-simpson-animated-gif-4.gif" Stretch="UniformToFill" LoadedBehavior="Play" />
            <TextBlock x:Name="CollapsedGif" Grid.Row="1" Text="You'll Downgrade Me i'll downgrade you!!!...." Background="Red" HorizontalAlignment="Stretch"/>
            <Grid.Style>
                <Style TargetType="Grid">
                    <Style.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Visibility" Value="Collapsed" />
                        </Trigger>
                    </Style.Triggers>
                </Style>
            </Grid.Style>
    </Grid>
    </Grid>

</Window>

enter image description here

WPF XAML: Fill Rectangle with color blue and within an image and text in center X,Y

3 Answers3