ProgressRing Control--Trying to understand how it works

Question

I am trying to understand how ProgressRing works so I can implement it in my Windows Store App.

I want to use a ProgressRing when I load an interior page within the app (not the initial page, but one that is called when the user clicks on an item on another page).

This interior page contains a RichTextColumns control that can potentially contain hundreds of paragraphs. The paragraphs are created by my code which translates legacy XML files into the XAML paragraphs, runs, etc. This code can take several seconds to run.

As I understand it, the ProgressRing works only with an asynchronous task on a separate thread. But I think I can't move my process to a separate thread because it is creating the user interface.

Also, am I correct that simply setting ProgressRing.IsActive to true (before calling the async process) and then to false (after the await statement) is all that is needed to make the ProgressRing appear? Or does there need to be an actual call to the ProgressRing.IsActive from some other method that explicitly indicates that the async task has completed?

So what should I be doing here? The documentation in the Library and in the Windows Store tutorials online is woefully brief--I am really having trouble figuring out how this works. I appreciate any guidance!

Answer 1

What I've done is have the progress ring be active as soon as my page starts loading.  When the async thread is finished, it sets IsActive=false.  Would this model work for you?

---

Matt Small - Microsoft Escalation Engineer - Forum Moderator
If my reply answers your question, please mark this post as answered.

NOTE: If I ask for code, please provide something that I can drop directly into a project and run (including XAML), or an actual application project. I'm trying to help a lot of people, so I don't have time to figure out weird snippets with undefined objects and unknown namespaces.

Answer 2

Matt,

Thanks for the quick reply. I appreciate it.

Here is what my code looks like

 public async Task<XDocument> GetPlayForReader(string id)
        {
            PlayForReader play = new PlayForReader();
            List<PlayPart> parts = new List<PlayPart>();

            // test for local storage to be added here

            // download play xml file from itn
            string xmlfile = string.Concat("http://www.indietheaternow.com/Content/AW8/p", id, ".xml");
            Uri uriname = new Uri(xmlfile);
            var client = new HttpClient();

            progress1.IsActive = true;

            var opContent = (await client.GetAsync(uriname)).Content;
            string fileContents = await opContent.ReadAsStringAsync();

            progress1.IsActive = false;

            XDocument doc = XDocument.Parse(fileContents);
            XElement elem = doc.Element("play");
            IEnumerable<XElement> playparts = elem.Element("structure").Elements("part");
            foreach (XElement pp in playparts)
            {
                PlayPart part = new PlayPart { Location = Convert.ToInt16(pp.Attribute("loc").Value), Name = pp.Attribute("name").Value, PartID = Convert.ToInt16(pp.Attribute("id").Value) };
                parts.Add(part);
            }
            IEnumerable<XElement> sections = elem.Elements("section");
            play.NumberSegments = sections.Count();
            play.Parts = parts;
            StringBuilder xmlraw = new StringBuilder();
            string topxml = "<?xml version=\"1.0\" encoding=\"utf-8\" ?><play>";
            string btmxml = "</play>";
            xmlraw.Append(topxml);

            foreach (XElement section in sections)
            {
                string sectiontxt = section.Value;
                sectiontxt = sectiontxt.Replace("<span class=\"italics\">", "**ITAL");
                sectiontxt = sectiontxt.Replace("</span>", "ITAL**");
                sectiontxt = sectiontxt.Replace("<br />", "**BREAK");
                sectiontxt = sectiontxt.Replace("<br/>", "**BREAK");
                sectiontxt = sectiontxt.Replace("<br>", "**BREAK");
                xmlraw.Append(sectiontxt);
            }
            xmlraw.Append(btmxml);
            XDocument playxml = XDocument.Parse(xmlraw.ToString());
            return playxml;
        }

So would I just remove the line progress1.IsActive = true;
or should it be the first line in the method?

Martin

Answer 3

Placing it on the first line won't make much difference, Try to set IsActive to false before the return statement("return playxml;") of the method.

---

- Ram
If a post answers your question, please click "Mark As Answer" on that post and "Mark as Helpful".

Answer 4

Ram

Thanks for the reply. I tried moving the IsActive statement as you suggested and I don't see any difference, the progressring still doesn't show up.

Martin

Answer 5

I guess the ProgressRing might be hidden somewhere behind other controls, Can you please try to set the IsActive property to true in your XAML and check whether you can see the ProgressRing in your design view first?

Or else can you please share the XAML here if possible ?

---

- Ram
If a post answers your question, please click "Mark As Answer" on that post and "Mark as Helpful".

Answer 6

Here is the XAML--I omitted the top sections and the bottom sections, I think this shows what you need to see,. Thank you for following up.

 <Grid Style="{StaticResource LayoutRootStyle}">
        <Grid.RowDefinitions>
            <RowDefinition Height="140"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!--
            The remainder of the page is one large FlipView that displays details for
            one item at a time, allowing the user to flip through all items in the chosen
            group
        -->
        <StackPanel Grid.Row="1" Orientation="Horizontal">
            <ProgressRing x:Name="progress1" IsActive="True" VerticalAlignment="Top" HorizontalAlignment="Center" Margin="200 0" />
        </StackPanel>


        <!--
                        UserControl chosen as the templated item because it supports visual state management
                        Loaded/unloaded events explicitly subscribe to view state updates from the page
                    -->
                    <UserControl Loaded="StartLayoutUpdates" Unloaded="StopLayoutUpdates" Grid.Row="1">
                        <ScrollViewer x:Name="scrollViewer" Style="{StaticResource HorizontalScrollViewerStyle}" Grid.Row="1" Background="#ff264d56" Padding="0, 6, 0, 0">

                            <!-- Content is allowed to flow across as many columns as needed -->
                            <common:RichTextColumns x:Name="rtc" Margin="117,0,117,47" Grid.Row="1">
                                
                                <RichTextBlock x:Name="rtb" Width="560" Style="{StaticResource ItemRichTextStyle}" IsTextSelectionEnabled="False">
                                    
                                </RichTextBlock>

                                <!-- Additional columns are created from this template -->
                                <common:RichTextColumns.ColumnTemplate>
                                    <DataTemplate>
                                        <RichTextBlockOverflow Width="560" Margin="80,0,0,0">
                                            <RichTextBlockOverflow.RenderTransform>
                                                <TranslateTransform X="-1" Y="4"/>
                                            </RichTextBlockOverflow.RenderTransform>
                                        </RichTextBlockOverflow>
                                    </DataTemplate>
                                </common:RichTextColumns.ColumnTemplate>
                            </common:RichTextColumns>

                            
                        </ScrollViewer>
                    </UserControl>
               

        <!-- Back button and page title -->
        <Grid Background="#ff264d56">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Button x:Name="backButton" Click="GoBack" IsEnabled="{Binding Frame.CanGoBack, ElementName=pageRoot}" Style="{StaticResource BackButtonStyle}"/>
            <TextBlock x:Name="pageTitle" Grid.Column="1" Text="{Binding Title}" Style="{StaticResource PageHeaderTextStyle}"/>
        </Grid>

Answer 7

Your Progress ring is hidden behind the UserControl. You've couple of ways to fix this:

1. Assign Canvas.ZIndex to 1 to the StackPanel inside which Progress ring is placed like this: 

<StackPanel Grid.Row="1" Orientation="Horizontal" Canvas.ZIndex="1">
            <ProgressRing x:Name="progress1" Height="60" Width="60" Foreground="White" IsActive="True" VerticalAlignment="Top" HorizontalAlignment="Center" Margin="200 0" />
        </StackPanel>

2. Please place the progress ring below the UserControl as Shown below:

<Grid Style="{StaticResource LayoutRootStyle}">
        <Grid.RowDefinitions>
            <RowDefinition Height="140"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!--
            The remainder of the page is one large FlipView that displays details for
            one item at a time, allowing the user to flip through all items in the chosen
            group
        -->
        
        <!--
                        UserControl chosen as the templated item because it supports visual state management
                        Loaded/unloaded events explicitly subscribe to view state updates from the page
                    -->
        <UserControl Loaded="StartLayoutUpdates" Unloaded="StopLayoutUpdates" Grid.Row="1">
            <ScrollViewer x:Name="scrollViewer" Style="{StaticResource HorizontalScrollViewerStyle}" Grid.Row="1" Background="#ff264d56" Padding="0, 6, 0, 0">

                <!-- Content is allowed to flow across as many columns as needed -->
                <common:RichTextColumns x:Name="rtc" Margin="117,0,117,47" Grid.Row="1">

                    <RichTextBlock x:Name="rtb" Width="560" Style="{StaticResource ItemRichTextStyle}" IsTextSelectionEnabled="False">

                    </RichTextBlock>

                    <!-- Additional columns are created from this template -->
                    <common:RichTextColumns.ColumnTemplate>
                        <DataTemplate>
                            <RichTextBlockOverflow Width="560" Margin="80,0,0,0">
                                <RichTextBlockOverflow.RenderTransform>
                                    <TranslateTransform X="-1" Y="4"/>
                                </RichTextBlockOverflow.RenderTransform>
                            </RichTextBlockOverflow>
                        </DataTemplate>
                    </common:RichTextColumns.ColumnTemplate>
                </common:RichTextColumns>


            </ScrollViewer>
        </UserControl>

        <StackPanel Grid.Row="1" Orientation="Horizontal">
            <ProgressRing x:Name="progress1" Height="60" Width="60" Foreground="White" IsActive="True" VerticalAlignment="Top" HorizontalAlignment="Center" Margin="200 0" />
        </StackPanel>
        

        <!-- Back button and page title -->
        <Grid Background="#ff264d56">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Button x:Name="backButton" Click="GoBack" IsEnabled="{Binding Frame.CanGoBack, ElementName=pageRoot}" Style="{StaticResource BackButtonStyle}"/>
            <TextBlock x:Name="pageTitle" Grid.Column="1" Text="{Binding Title}" Style="{StaticResource PageHeaderTextStyle}"/>
        </Grid>
    </Grid>

---

- Ram
If a post answers your question, please click "Mark As Answer" on that post and "Mark as Helpful".

Answer 8

Ram, thanks, the second alternative works perfectly. Most appreciated.