Changing the orientation of a user control (ProgressBar) in WP7? - xaml

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>

Answer 2

I could enable the orientation for my popup UserControl by simply adding to the Children of the main screen on top of which the Popup is being displayed as:
popUp = new Popup();
loginControl = new LoginPopup(); // this is the custom UserControl
popUp.Child = loginControl;
LayoutRoot.Children.Add(popUp);

Answer 3

The Popup class does not support orientation so you can't use this and expect it to handle orientation changes. This is regardless of whether the control displayed in the popup is in the same assembly or not.
Instead of using a Popup a simple alternative would be to put the control directly on top of all other content on the page. You could include this inside another control (such as a grid or a panel) if you wish.
Manually adding a RotateTransform to the control will give you the ability to add extra control over adjusting the orientation but I'd recommend not going down this route if you can avoid it.