How to Keep Button Upright When Device Position Changes - xaml

Question

I'd like to be able to allow a button that I have in my application to always remain looking like it is in the upright position, even when the device is rotated clockwise or counterclockwise. The standard app bar kind of does this with adjusting the application bar icons according to whether the device is in portrait or landscape mode, so I'd like to do something similar with a button on my page. How might I do something like this? Any recommendations into the methods? I'd like to either stick with something like what the app bar already does, or always rotate the button so it remains upright as the device rotates.
<Button x:Name="CameraButton" Grid.Row="1" Grid.Column="0" Margin="-48,0,0,-12"
Click="CameraButton_Click">
<Button.Content>
<Image Source="/Assets/Camera_Button1.png"/>
</Button.Content>
</Button>

Answer 1

If you do not care the rotate animation auto played by system, you can easily achieve by providing 3 different icons(Portrait, LandscapeLeft, LandscapeRight).
In Xaml, you first add your ApplicationBarIconButton into the page Resource, and change its IconUri later when OrientationChanged is fired. Hope it helps.
The project code can be downloaded here:
http://hdtp.synology.me/ApplicationBarIconDirection.zip
xaml code:
<phone:PhoneApplicationPage
x:Class="ApplicationBarIconDirection.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="PortraitOrLandscape" Orientation="Portrait"
shell:SystemTray.IsVisible="True"
OrientationChanged="PhoneApplicationPage_OrientationChanged">
<phone:PhoneApplicationPage.Resources>
<shell:ApplicationBarIconButton x:Key="icon_arrow" IconUri="/Assets/up.png" Text="FixedUp"/>
</phone:PhoneApplicationPage.Resources>
<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">
</Grid>
<phone:PhoneApplicationPage.ApplicationBar>
<shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
</shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>
</phone:PhoneApplicationPage>
xaml.cs code:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.Phone.Controls;
using System.Windows.Navigation;
using Microsoft.Phone.Shell;
namespace ApplicationBarIconDirection
{
public partial class MainPage : PhoneApplicationPage
{
// Constructor
public MainPage()
{
InitializeComponent();
}
protected override void OnNavigatedTo(NavigationEventArgs e)
{
this.ApplicationBar.Buttons.Add(this.Resources["icon_arrow"] as ApplicationBarIconButton);
}
private void PhoneApplicationPage_OrientationChanged(object sender, OrientationChangedEventArgs e)
{
if (e.Orientation == PageOrientation.LandscapeLeft)
{
(this.Resources["icon_arrow"] as ApplicationBarIconButton).IconUri = new Uri("/Assets/left.png", UriKind.Relative);
}
else if (e.Orientation == PageOrientation.LandscapeRight)
{
(this.Resources["icon_arrow"] as ApplicationBarIconButton).IconUri = new Uri("/Assets/right.png", UriKind.Relative);
}
else
{
(this.Resources["icon_arrow"] as ApplicationBarIconButton).IconUri = new Uri("/Assets/up.png", UriKind.Relative);
}
}
}
}

Answer 2

Application Bar has a property named SupportedOrientation which makes it change its orientation every time the orientation of the phone changes (see this ). But, If we look at button then we see that there is neither such property named SupportedOrientation nor any other property functioning analogous to that of SupportedOrientation for applicationbar. I would hence recommend you to make your own logic according to the changes in the phones orientation.
sample logic to change orientations-
logic to rotate a button
CompositeTransform ct=new CompositeTransform (){Rotation=90};
button.Rendertransform=ct;
Apply this on orientation changes like this
private void PhoneApplicationPage_OrientationChanged(object sender, OrientationChangedEventArgs e)
{
if (e.Orientation == PageOrientation.LandscapeLeft)
{
//apply rotation with some angle say 90
}
else if (e.Orientation == PageOrientation.LandscapeRight)
{
//apply rotation 180
}
else if(e.Orientation == PageOrientation.PortraitUp)
{
//apply rotation 270
}
else if(e.Orientation == PageOrientation.PortraitDown)
{
//apply rotation 360
}
}
And for smoothness like that in applicationbar buttons you would have to make your hands dirty with the storyboards and animations using expression blend