Question

Does any one know if its possible to animate app.current.mainwindow.width so that you get a nice animation with easing if you programatically resize the oob apps window.
Thanks.

Answer 1

The simplest way is to add a slider control to your page. The slider can be collapsed and is only used to have an easy propery to animate. Animate the Value property of the slider. In the ValueChanged event of the slider update the window width. You need elevated thrust to do this.

It looks something like this:

Xaml

<UserControl.Resources>
  <Storyboard x:Name="Storyboard1">
    <DoubleAnimation Duration="0:0:1" To="750" 
                     Storyboard.TargetProperty="(RangeBase.Value)" 
                     Storyboard.TargetName="slider1">
      <DoubleAnimation.EasingFunction>
        <BounceEase EasingMode="EaseOut"/>
      </DoubleAnimation.EasingFunction>
    </DoubleAnimation>
  </Storyboard>    
</UserControl.Resources>

<Grid x:Name="LayoutRoot" Background="Green">
  <Button Width="50" Height="32" Click="Button_Click">Test</Button>
  <Slider Visibility="Collapsed" VerticalAlignment="Bottom" 
          x:Name="slider1" Maximum="1000" 
          ValueChanged="slider1_ValueChanged" />
</Grid>

Code Behind

private void Button_Click(object sender, RoutedEventArgs e)
{
    Storyboard1.Begin();
}

private void slider1_ValueChanged(object sender, 
                                  RoutedPropertyChangedEventArgs<double> e)
{
    Application.Current.MainWindow.Width = e.NewValue;
}