Modal window is not fullscreen

7 posts, 1 answers
  1. StepTNT
    StepTNT avatar
    18 posts
    Member since:
    Mar 2013

    Posted 18 Oct 2013 Link to this post

    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?
  2. Deyan
    Admin
    Deyan avatar
    2039 posts

    Posted 21 Oct 2013 Link to this post

    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
    Have a suggestion or face a problem - you can use the Ideas & Feedback portal to submit ideas, feedback and vote for them.
  3. DevCraft banner
  4. StepTNT
    StepTNT avatar
    18 posts
    Member since:
    Mar 2013

    Posted 21 Oct 2013 Link to this post

    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>
  5. MasterChiefMasterChef
    MasterChiefMasterChef avatar
    152 posts
    Member since:
    Jan 2013

    Posted 23 Oct 2013 Link to this post

    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

  6. Answer
    Todor
    Admin
    Todor avatar
    778 posts

    Posted 24 Oct 2013 Link to this post

    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
    Have a suggestion or face a problem - you can use the Ideas & Feedback portal to submit ideas, feedback and vote for them.
  7. StepTNT
    StepTNT avatar
    18 posts
    Member since:
    Mar 2013

    Posted 30 Oct 2013 Link to this post

    My bad, I should have thought about those properties!

    Everything works now, thank you!
  8. mickle
    mickle avatar
    1 posts
    Member since:
    Feb 2014

    Posted 13 Feb 2014 Link to this post

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