Modal window is not fullscreen

[StepTNT]

Plain and simple, here's my code:

<!-- Modal windows -->
        <telerikPrimitives:RadModalWindow x:Name="IngredientsWindow" IsFullScreen="True" IsClosedOnOutsideTap="True">
            <telerikPrimitives:RadWindow.ApplicationBarInfo>
                <telerikPrimitives:ApplicationBarInfo>
                    <telerikPrimitives:ApplicationBarButton Name="SaveApplicationBarButton" IconUri="/Assets/AppBar/save.png" Text="Save" Click="SaveApplicationBarButton_OnClick" />
                    <telerikPrimitives:ApplicationBarButton Name="CancelApplicationBarButton" IconUri="/Assets/AppBar/cancel.png" Text="Cancel" Click="CancelApplicationBarButton_OnClick" />
                </telerikPrimitives:ApplicationBarInfo>
            </telerikPrimitives:RadWindow.ApplicationBarInfo>
            <Border Width="Auto" BorderBrush="{StaticResource PhoneBorderBrush}" BorderThickness="{StaticResource PhoneBorderThickness}">
                <Grid Background="{StaticResource PhoneBackgroundBrush}">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="10*"/>
                        <RowDefinition/>
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition/>
                        <ColumnDefinition/>
                    </Grid.ColumnDefinitions>

                    <telerikPrimitives:RadTextBox Header="Name: " Width="200" Text="{Binding CurrentIngredient.IngredientName, Mode=TwoWay}"/>
                </Grid>
            </Border>

            <telerikPrimitives:RadModalWindow.OpenAnimation>
                <telerik:RadPlaneProjectionAnimation CenterY="0.5" CenterX="0" StartAngleX="-90" EndAngleX="0" Axes="X">
                    <telerik:RadPlaneProjectionAnimation.Easing>
                        <CubicEase EasingMode="EaseOut"/>
                    </telerik:RadPlaneProjectionAnimation.Easing>
                </telerik:RadPlaneProjectionAnimation>
            </telerikPrimitives:RadModalWindow.OpenAnimation>
        </telerikPrimitives:RadModalWindow>

and here's what happens:

http://i.imgur.com/FWNq9bh.png

Any idea?

[Deyan]

Hi Stefano,

Thanks for writing.

Actually the Modal Windows is opened full-screen as the background contents are slightly grayed out by its background. What you need to do is make sure the content of the window is stretched to the entire screen estate. Can you try setting the Horizontal and Vertical-Alignment properties of the rootmost element to Stretch and also remove the Width=Auto setting?

Let me know if you need further assistance with this.

Regards,
Deyan
Telerik

[StepTNT]

Thank you for the reply.

I've put

HorizontalAlignment="Stretch" VerticalAlignment="Stretch"

almost everywhere without success.

This is the "new" code, the result is the same as the first post:

<Grid x:Name="LayoutRoot"
          HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
        <!-- Modal windows -->
        <telerikPrimitives:RadModalWindow x:Name="IngredientsWindow"
                            HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
                            IsFullScreen="True" IsClosedOnOutsideTap="True">
            <telerikPrimitives:RadWindow.ApplicationBarInfo>
                <telerikPrimitives:ApplicationBarInfo>
                    <telerikPrimitives:ApplicationBarButton Name="SaveApplicationBarButton"
                                                            IconUri="/Assets/AppBar/save.png" Text="Save"
                                                            Click="SaveApplicationBarButtonIngredient_OnClick" />
                    <telerikPrimitives:ApplicationBarButton Name="CancelApplicationBarButton"
                                                            IconUri="/Assets/AppBar/cancel.png" Text="Cancel"
                                                            Click="CancelApplicationBarButtonIngredient_OnClick" />
                </telerikPrimitives:ApplicationBarInfo>
            </telerikPrimitives:RadWindow.ApplicationBarInfo>
            <Border BorderBrush="{StaticResource PhoneBorderBrush}"
                    HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
                    BorderThickness="{StaticResource PhoneBorderThickness}">
                <StackPanel
                    HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
                    Background="{StaticResource PhoneBackgroundBrush}">

                    <telerikPrimitives:RadTextBox Header="Name: "
                                                  Width="200"
                                                  HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
                                                  Text="{Binding CurrentIngredient.IngredientName, Mode=TwoWay}" />
       </StackPanel>
            </Border>

            <telerikPrimitives:RadModalWindow.OpenAnimation>
                <telerik:RadPlaneProjectionAnimation CenterY="0.5" CenterX="0" StartAngleX="-90" EndAngleX="0" Axes="X">
                    <telerik:RadPlaneProjectionAnimation.Easing>
                        <CubicEase EasingMode="EaseOut" />
                    </telerik:RadPlaneProjectionAnimation.Easing>
                </telerik:RadPlaneProjectionAnimation>
            </telerikPrimitives:RadModalWindow.OpenAnimation>
        </telerikPrimitives:RadModalWindow>

[MasterChiefMasterChef]

Hey StepTNT,

As far as I know from experience, the RadModalWindow opens in full screen automatically. I have created one and set not one property, then called RadModalWindow1.IsOpen = true; and it appeared full screen. If you were not aware, the window that pops up is transparent, so unless you explicitly set the background, it may not appear to be full screen. Since you are adding the RadTextBox as a child of the grid, it will automatically be positioned in the center of the grid defined. If you try setting a different margin value for the text box, or adding more items to your modal window, you will see how the modal window is actually fullscreen.

So basically, adding children to a grid will position them in the center of the screen and the modal window is transparent by default. From your screenshot it seems that your modal window is full screen already.

Hope this helps,
Master Chief

[Todor]

Hello Stefano,

Thank you for getting back to us.

As Master Chief correctly pointed, RadModalWindow is actually full screen by default and you can see this if you set its Background property to a visible color.

However, I assume that you also want its Content (the Border with the TextBox) to cover the whole screen. If that's the case, you need to set RadModalWindow's HorizontalContentAlignment and VerticalContentAlignment properties to Stretch. This way the Content of the window will be also stretched to fill the whole screen.

Let me know if you need further assistance.
 
Regards,
Todor
Telerik

[StepTNT]

My bad, I should have thought about those properties!

Everything works now, thank you!

[mickle]

This particular fourm [url=http://www.allmobilespec.com/]i[/url]s really awesome as well as informative.