Question

I’m using a progress bar in my app, this progress bar is defined inside the user control, e.g.:

UserControl x:Class="StirLibrary.ProgressBarControl"
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"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
mc:Ignorable="d"  d:DesignHeight="800" d:DesignWidth="480">

<Grid x:Name="LayoutRoot" Height="800">
    <Border BorderThickness="2" BorderBrush="Transparent" Background="Transparent" Margin="50,522,50,158">
        <StackPanel>
            <TextBlock Text="Loading..." Name="loading" Grid.Row="1" HorizontalAlignment="Center" Height="30" Foreground="Green">
            </TextBlock>
            <ProgressBar Background="Transparent" Margin="10, 0, 0, 10" Height="80" HorizontalAlignment="Center" Name="progressBar1" VerticalAlignment="Top" Width="380" Grid.Row="2" HorizontalContentAlignment="Left" IsHitTestVisible="True" VerticalContentAlignment="Top" Value="0" Maximum="100">
            </ProgressBar>
        </StackPanel>
    </Border>
</Grid>
</UserControl>

My problem is when the orientation of my app changes to landscape the progress bar’s orientation doesn’t change and this makes the app look ugly. Any suggestions how to avoid this and make the progress bar displayed as per orientation are welcome.

Answer 1

As Matt has mentioned above it is not possible to orient a pop up in user control because User control doesn’t have any room for supported orientation. but since it was very crucial requirement for our App i found a work around and made few changes in the Main Page’s class file and the user control’s class file.. the changes are:

 private void PhoneApplicationPage_OrientationChanged(object sender, OrientationChangedEventArgs e)
        {
            if ((e.Orientation & PageOrientation.Portrait) == PageOrientation.Portrait)
            {
ProgressBarControl.getInstance().ProgressBarControl_LayoutUpdated(this, e,e.Orientation.ToString());
}
else if ((e.Orientation & PageOrientation.Landscape) == PageOrientation.Landscape)
            {
ProgressBarControl.getInstance().ProgressBarControl_LayoutUpdated(this, e, e.Orientation.ToString());
}
}

These are the changes in MainPage.xaml.cs

public partial class ProgressBarControl : UserControl
{
    private static ProgressBarControl instance = null;
    public static Popup popup;

    private ProgressBarControl()
    {
        InitializeComponent();
    }
    public static ProgressBarControl getInstance()
    {
        if (instance == null)
        {
            instance = new ProgressBarControl();
            popup = new Popup();
            popup.Child = instance;
            popup.IsOpen = false;
        }
        return instance;
    }
    public void ProgressBarControl_LayoutUpdated(object sender, EventArgs e,string orientation)
    {
        if (orientation == "LandscapeRight")
        {
            ProgressPanel.RenderTransformOrigin = new Point(0.5, 0.5);
            ProgressPanel.RenderTransform = new CompositeTransform { Rotation = 270 };
        }
        else if(orientation == "LandscapeLeft")
        {
            ProgressPanel.RenderTransformOrigin = new Point(0.5, 0.5);
            ProgressPanel.RenderTransform = new CompositeTransform { Rotation = 90 };
        }
        else
        {
            ProgressPanel.RenderTransformOrigin = new Point(0, 0);
            ProgressPanel.RenderTransform = new CompositeTransform { Rotation = 0 };
        }

    }

    public static void displayProgressBar(int requestId, int status, string msg)
    {
        System.Windows.Deployment.Current.Dispatcher.BeginInvoke(() =>
            {
                if (instance == null)
                {
                    instance = new ProgressBarControl();
                    popup = new Popup();
                    popup.Child = instance;
                }
                popup.IsOpen = true;
                instance.loading.Text = msg;
                instance.progressBar1.IsIndeterminate = true;
                instance.progressBar1.Value = status;
            });
    }
    public static void dismissProgressBar()
    {
        System.Windows.Deployment.Current.Dispatcher.BeginInvoke(() =>
            {
                if(popup!=null)
                {
                    popup.IsOpen = false;
                }
            });
    }
}

and this what i have done in my ProgressBarControl.cs file (this is the user control’s class file)

Xaml file:

<UserControl x:Class="StirLibrary.ProgressBarControl"
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"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
mc:Ignorable="d"  d:DesignHeight="800" d:DesignWidth="480">

<Grid x:Name="LayoutRoot" Height="800">
    <!--<Border BorderThickness="2" BorderBrush="Black" Background="Transparent" Margin="54,406,50,320"></Border>-->
    <StackPanel x:Name="ProgressPanel" Background="Black" Margin="54,406,50,320">
        <TextBlock Text="Loading..." Name="loading" Grid.Row="1" HorizontalAlignment="Center" Height="32" Foreground="White"></TextBlock>
        <ProgressBar Background="Green" Margin="10, 0, 0, 10" Height="33" Foreground="White" HorizontalAlignment="Center" Name="progressBar1" VerticalAlignment="Top" Width="351" Grid.Row="2" HorizontalContentAlignment="Left" IsHitTestVisible="True" VerticalContentAlignment="Top" Value="0" Maximum="100"></ProgressBar>
    </StackPanel>
</Grid>
</UserControl>