RadModalWindow & Grid Issue?

3 posts, 0 answers
  1. Mauro
    Mauro avatar
    24 posts
    Member since:
    Apr 2011

    Posted 13 Jun 2012 Link to this post

    Hi,


    I'm looking to place an Advert at the Top of a RadModalWindow, with more content below it centered. Currently, I have a Grid as the container content, but I see that the Grid doesn't fill the area of the Modal Window. (It shrinks to just the required area)

    I want to achieve some like this


     +--------------------------------+
     |                                          |
     | Ad at the Top, Centered   |
     +--------------------------------+  
     |                                          |
     |                                          |
     |                                          |
     |                                          |
     |                                          |
     |      Content Centered        |
     |                                          |
     |                                          |
     |                                          |
     +--------------------------------+
     
     But I'm landing up with something like this
     
     +--------------------------------+
     |                                          |
     |       | 
     |                                          |
     |                                          |
     |                                          |
     | Ad at the Mid, Centered    |
     +--------------------------------+  
     |                                          |
     |      Content Centered        |
     |                                          |
     |                                          |
     |                                          |
     |                                          |
     |                                         |
     +--------------------------------+
     
     Is there some special layout that is happening for the RadModalWindow or is the Placement property overriding something?
     
     Here is some of the code :
     
      <telerikPrimitives:RadModalWindow 
                                          IsClosedOnBackButton="False"
                                          IsClosedOnOutsideTap="False"
                                          IsFullScreen="True"
                                          IsOpen="True"
                                          Placement="CenterCenter">


            <!--  Open Animation  -->
            <telerikPrimitives:RadWindow.OpenAnimation>
                <telerik:RadMoveAnimation Duration="0:0:0.4"
                                          StartPoint="500, 0"
                                          EndPoint="0, 0">
                    <telerik:RadMoveAnimation.Easing>
                        <CubicEase EasingMode="EaseOut" />
                    </telerik:RadMoveAnimation.Easing>
                </telerik:RadMoveAnimation>
            </telerikPrimitives:RadWindow.OpenAnimation>


            <!--  Close Animation  -->
            <telerikPrimitives:RadWindow.CloseAnimation>
                <telerik:RadMoveAnimation Duration="0:0:0.3"
                                          StartPoint="0, 0"
                                          EndPoint="0, 820" />
            </telerikPrimitives:RadWindow.CloseAnimation>


            <!--  Contents  -->


            <Grid x:Name="LayoutRoot"
                  x:FieldModifier="private">
                <Grid.RowDefinitions>
                    <RowDefinition Height="*" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />                
                    <RowDefinition Height="Auto" />                
                </Grid.RowDefinitions>

    <CommonControls:AdvertControl Grid.Row="0" />

    <TextBlock Grid.Row="1"
      Margin="{StaticResource PhoneMargin}"
      Style="{StaticResource PhoneTextTitle2Style}"
      Text="Test Text"
      TextAlignment="Center"
      TextWrapping="Wrap" />




    <TextBlock Grid.Row="2"
      Margin="{StaticResource PhoneMargin}"
      Style="{StaticResource PhoneTextTitle2Style}"
      Text="Test Text"
      TextAlignment="Center"
      TextWrapping="Wrap" />

    <TextBlock Grid.Row="3"
      Margin="{StaticResource PhoneMargin}"
      Style="{StaticResource PhoneTextTitle2Style}"
      Text="{Test Text"
      TextAlignment="Center"
      TextWrapping="Wrap" />
            </Grid>
     

    Is there anyway to get the desired outcome I want?

    Regards,
    Mauro
     
  2. Victor
    Admin
    Victor avatar
    1351 posts

    Posted 13 Jun 2012 Link to this post

    Hi Mauro,

    Thank you for the question.
    You need to set the PlacementTarget of RadModalWindow to the page or frame. Also you need to set the WindowSizeMode property to FitToPlacementTarget. Then you can control the contents inside the window with HorizontalAlignment and VerticalAlignment. That is assuming you want the modal window to stretch over the whole screen. Is that correct?

    All the best,
    Victor
    the Telerik team

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

  3. DevCraft banner
  4. Mauro
    Mauro avatar
    24 posts
    Member since:
    Apr 2011

    Posted 13 Jun 2012 Link to this post

    Hi Victor,

    I have tried as you said, but still no luck. The Advert is still the same as before and not aligning to the top.

    Here is what I have now for the RadModalWindow

    <telerikPrimitives:RadModalWindow
                                          IsClosedOnBackButton="False"
                                          IsClosedOnOutsideTap="False"
                                          IsOpen="True"
                                          PlacementTarget="{Binding ElementName=MainGrid}"
                                          WindowSizeMode="FitToPlacementTarget">

    With regards to your question, I do want the Modal window to be full screen.

    Is there something that I'm missing?

    Update : I managed to get it working...it was a stupid error on my part :) Thanks for the help.

    Regards,
    Mauro

Back to Top