CODEWITHSUNDEEP
c#windows-phone-7xamlwindows-phone-7.1
Paul Marques
Paul Marques

Reputation: 604

Slider control not resizing correctly when Page Orientation changes

Has anyone encountered this problem with Windows Phone 7.1?

I have a simple page with a slider control at the top stretched to full width. The page supports orientation changes.

If you run the app and start in portrait mode, put the slider in the middle of the bar. Now change orientation so you are in lanscape mode. Now move the slider fully to the right (max value). Now orientate back to portrait - what do you see?

I see a slider, but the button is not on screen and if I tap anywhere in the slider to move the bar button it takes a few attempts. This seems to be happening because the slider hasn't re-sized correctly. This only seems to happen if the slider value is at max.

Has anyone else seen this issue? The problem is the same on the emulator and my HTC Mozart device.

Try this out, run it up in Landscape mode, move slider all the way to the right, then change to portrait mode and notice the Slider Bar end is now not visible.

<phone:PhoneApplicationPage 
x:Class="SliderRedrawPageOrientation.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">

<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <!--TitlePanel contains the name of the application and page title-->
    <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
        <TextBlock x:Name="ApplicationTitle" Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/>
        <TextBlock x:Name="PageTitle" Text="page name" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
    </StackPanel>

    <!--ContentPanel - place additional content here-->
    <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
        <Slider HorizontalAlignment="Stretch"></Slider>
    </Grid>
</Grid>

Upvotes: 3

Views: 551

Answers (1)

Metro Smurf
Metro Smurf

Reputation: 38385

I could reproduce this issue and it occurs even when the slider button is less than the MaxValue. Here's a solution that uses a BackgroundWorker and a quick nap; a bit of a hack, but it does resolve the issue:

public MainPage()
{
    InitializeComponent();

    this.OrientationChanged += OnOrientationChanged;
}

private void OnOrientationChanged( object sender, OrientationChangedEventArgs e )
{
    double val = MySlider.Value;
    MySlider.Value = 0;

    var bw = new BackgroundWorker();
    bw.DoWork += ( _, __ ) => Thread.Sleep( 100 );
    bw.RunWorkerCompleted += ( _, __ ) => Dispatcher.BeginInvoke( () => MySlider.Value = val );
    bw.RunWorkerAsync();
}

Upvotes: 2

Related Questions