Sign Up

Sign Up to our social questions and Answers Engine to ask questions, answer people’s questions, and connect with other people.

Have an account? Sign In

Have an account? Sign In Now

Sign In

Login to our social questions & Answers Engine to ask questions answer people’s questions & connect with other people.

Sign Up Here

Forgot Password?

Don't have account, Sign Up Here

Forgot Password

Lost your password? Please enter your email address. You will receive a link and will create a new password via email.

Have an account? Sign In Now

You must login to ask a question.

Forgot Password?

Need An Account, Sign Up Here

Please briefly explain why you feel this question should be reported.

Please briefly explain why you feel this answer should be reported.

Please briefly explain why you feel this user should be reported.

Sign InSign Up

The Archive Base

The Archive Base Logo The Archive Base Logo

The Archive Base Navigation

  • SEARCH
  • Home
  • About Us
  • Blog
  • Contact Us
Search
Ask A Question

Mobile menu

Close
Ask a Question
  • Home
  • Add group
  • Groups page
  • Feed
  • User Profile
  • Communities
  • Questions
    • New Questions
    • Trending Questions
    • Must read Questions
    • Hot Questions
  • Polls
  • Tags
  • Badges
  • Buy Points
  • Users
  • Help
  • Buy Theme
  • SEARCH
Home/ Questions/Q 391571
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Editorial Team
Asked: May 12, 20262026-05-12T16:04:28+00:00 2026-05-12T16:04:28+00:00

I’d like to add a Loading- Image on the top of my ListView while

  • 0

I’d like to add a “Loading”-Image on the top of my ListView while all items are loading, if there are a lot of items being loaded, I still want a nice user experience.

So therefore I want a floating Image ( Animated GIF ? ) on top of my ListView.

How would one solve this and once you have the floating image or control, how do you make the GIF animated?

  • 1 1 Answer
  • 0 Views
  • 0 Followers
  • 0
Share
  • Facebook
  • Report

Leave an answer
Cancel reply

You must login to add an answer.

Forgot Password?

Need An Account, Sign Up Here

1 Answer

  • Voted
  • Oldest
  • Recent
  • Random
  1. Editorial Team
    Editorial Team
    2026-05-12T16:04:28+00:00Added an answer on May 12, 2026 at 4:04 pm

    Here’s some XAML that I use to create an AJAX-like wait spinner for WPF. I uses geometry and animation rather than an animated GIF, and you can control the size and rate by tweaking the XAML:

    <!-- Style for AJAX-like wait spinners -->
    <Style x:Key="WaitSpinnerStyle" TargetType="Control">
        <Setter Property="Foreground" Value="#888" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Control">
                    <Viewbox Visibility="{TemplateBinding Visibility}">
                        <Canvas RenderTransformOrigin="0.5,0.5" Width="120" Height="120" >
                            <Ellipse Width="21.835" Height="21.862" Canvas.Left="20.1696" Canvas.Top="9.76358" Stretch="Fill" Fill="{TemplateBinding Foreground}" Opacity="1.0"/>
                            <Ellipse Width="20.835" Height="20.862" Canvas.Left="2.86816" Canvas.Top="29.9581" Stretch="Fill" Fill="{TemplateBinding Foreground}" Opacity="0.9"/>
                            <Ellipse Width="19.835" Height="19.862" Canvas.Left="0.00001" Canvas.Top="57.9341" Stretch="Fill" Fill="{TemplateBinding Foreground}" Opacity="0.8"/>
                            <Ellipse Width="17.835" Height="17.862" Canvas.Left="12.1203" Canvas.Top="83.3163" Stretch="Fill" Fill="{TemplateBinding Foreground}" Opacity="0.7"/>
                            <Ellipse Width="16.835" Height="16.862" Canvas.Left="36.5459" Canvas.Top="98.1380" Stretch="Fill" Fill="{TemplateBinding Foreground}" Opacity="0.6"/>
                            <Ellipse Width="14.835" Height="14.862" Canvas.Left="64.6723" Canvas.Top="96.8411" Stretch="Fill" Fill="{TemplateBinding Foreground}" Opacity="0.5"/>
                            <Ellipse Width="13.835" Height="13.862" Canvas.Left="87.6176" Canvas.Top="81.2783" Stretch="Fill" Fill="{TemplateBinding Foreground}" Opacity="0.4"/>
                            <Ellipse Width="12.835" Height="12.862" Canvas.Left="98.165"  Canvas.Top="54.4140" Stretch="Fill" Fill="{TemplateBinding Foreground}" Opacity="0.3"/>
                            <Ellipse Width="11.835" Height="11.862" Canvas.Left="92.9838" Canvas.Top="26.9938" Stretch="Fill" Fill="{TemplateBinding Foreground}" Opacity="0.2"/>
                            <Canvas.RenderTransform>
                                <RotateTransform x:Name="SpinnerRotate" Angle="0" />
                            </Canvas.RenderTransform>
                            <Canvas.Triggers>
                                <EventTrigger RoutedEvent="ContentControl.Loaded">
                                    <BeginStoryboard>
                                        <Storyboard>
                                            <DoubleAnimation
                                                Storyboard.TargetName="SpinnerRotate"
                                                Storyboard.TargetProperty="Angle"
                                                From="0" To="360" Duration="0:0:01.3"
                                                RepeatBehavior="Forever" />
                                        </Storyboard>
                                    </BeginStoryboard>
                                </EventTrigger>
                            </Canvas.Triggers>
                        </Canvas>
                    </Viewbox>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    

    You use it like this (specify the colour if you want to change it):

    <Control Style="{StaticResource WaitSpinnerStyle}" Width="35" />
    <Control Style="{StaticResource WaitSpinnerStyle}" Width="35" Foreground="Green" />
    

    The above XAML would look like this (you have to imagine them spinning!):


    To have a layer appear above your ListBox, wrap it in a Grid like this:

    <Grid>
        <!-- LOADING overlay (for async-load) -->
        <Border HorizontalAlignment="Stretch" VerticalAlignment="Stretch" IsHitTestVisible="True" 
                Background="#40000000" CornerRadius="4"
                Visibility="{Binding Path=IsLoading, Converter={StaticResource BooleanToVisibilityConverter}}">
            <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
                <Control Style="{StaticResource WaitSpinnerStyle}" Width="35" Foreground="White" />
                <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Text="LOADING..." FontWeight="Bold" Margin="0,5" Foreground="White" FontSize="12" />
            </StackPanel>
        </Border>
        <ListBox />
    </Grid>
    

    Using a Grid means that the Border will appear on top of the ListBox. In this case, the layer will appear greyed out, and will steal any mouse actions, effectively disabling the underlying ListBox.

    Note that the binding here to IsLoaded connects to my view model. I set it to false when I start loading, then again to true when the loading completes. Note that I load my items off the dispatcher thread (on a worker thread) so that the UI updates while I’m doing this work.

    • 0
    • Reply
    • Share
      Share
      • Share on Facebook
      • Share on Twitter
      • Share on LinkedIn
      • Share on WhatsApp
      • Report

Sidebar

Related Questions

I have a string like this: La Torre Eiffel paragonata all&#8217;Everest What PHP function
I would like to count the length of a string with PHP. The string
For some reason, after submitting a string like this Jack’s Spindle from a text
I used javascript for loading a picture on my website depending on which small
link Im having trouble converting the html entites into html characters, (&# 8217;) i
I've got a string that has curly quotes in it. I'd like to replace
I would like to run a str_replace or preg_replace which looks for certain words
I am trying to render a haml file in a javascript response like so:
I'm parsing an RSS feed that has an &#8217; in it. SimpleXML turns this
I have a text area in my form which accepts all possible characters from

Explore

  • Home
  • Add group
  • Groups page
  • Communities
  • Questions
    • New Questions
    • Trending Questions
    • Must read Questions
    • Hot Questions
  • Polls
  • Tags
  • Badges
  • Users
  • Help
  • SEARCH

Footer

© 2021 The Archive Base. All Rights Reserved
With Love by The Archive Base

Insert/edit link

Enter the destination URL

Or link to existing content

    No search term specified. Showing recent items. Search or use up and down arrow keys to select an item.