locked
Getting the "expected" sizing of grids inside a hub control hubsection

    Question

  • By now, we've seen thousands of questions about how to access controls inside a DataTemplate.  We solved that one.

    So far, though I have found nothing that completely solves my new problem of the grid sizing inside a DataTemplate inside of a Universal app to be run on Windows Phone and Windows.

    Take THIS XAML for instance:

        <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="700" />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="1*" />
                <RowDefinition Height="2*" />
                <RowDefinition Height="3*" />
            </Grid.RowDefinitions>
    
            <Rectangle Fill="Red" Grid.Row="0" />
            <Rectangle Fill="Blue" Grid.Row="1" />
            <Rectangle Fill="Green" Grid.Row="2" />
        </Grid>


    This of course generates the 1 part red, 2 parts blue, and 3 parts green pattern.

    But this:

    <Hub>
    <HubSection Width="780" x:Name="MainSection">
      <DataTemplate>
        <Grid>
          <Grid.RowDefinitions>
            <RowDefinition Height="100" />
            <RowDefinition Height="300" />
          </Grid.RowDefinitions>
          
          <Rectangle Fill="AliceBlue" Grid.Row="0" />
          <Rectangle Fill="Blue" Grid.Row="1" />
    
        </Grid>
      </DataTemplate>
    </Hubsection>
    </Hub>

    Doesn't.

    The reason seems to be because the hubsection needs to use a DataTemplate, and somehow the DataTemplate doesn't let the grid inside it understand the parent's sizing.

    I know an MVP will step in and tell me just how to get the information into grids inside the hub.

    Probably something about the Grid's setter properties or something, but please provide the XAML code to fix this.

    -thanks
    -e


    -- me --



    Sunday, October 19, 2014 2:42 AM

Answers

  • This is expected behaviour. Hubs are deliberately tuned differently for Windows and Windows Phone screen sizes and shapes. This is common with many controls. Because the UI design needs to be tuned for different screens sharing UI for complex apps is often not recommended. The default Universal app templates all have separate UI modules in the platform specific projects rather than in the Shared project.

    For the HubSections specifically, look at how they work on the two platforms. On the narrower Windows Phone the HubSections default to the screen's width (less a margin). On the larger Windows the HubSections don't have a default width but match their contents.

    That follows your results: on the phone the Grid grows to the defined size if the HubSection.

    On Windows the HubSection and Grid are trying to size off of each other and need more information. 

    Thursday, October 23, 2014 1:35 PM
    Owner
  • I thank you for your time.

    I know you're very busy and I don't ask stupid questions.

    I just wonder if there are a lot more people out there who are confused the same way I am, and wonder if a tweak to the documentation makes sense.

    I'll try to investigate more next time before I inquire.

    -thanks
    -e


    -- me --

    Thursday, October 23, 2014 7:59 PM

All replies

  • I have come upon a piece of evidence that "seems" to indicate (quotations to denote that I'm asserting the idea sheepishly, without obviously every piece of evidence imaginable, due to the complexity of the problem, and the fact that I am not a XAML expert) that Windows and Windows Phone act totally different.

    Using the universal Hub app template, I just created the following for the first hubsection

          <HubSection x:Uid="HubSection1" Header="Section 1" Width="300" DataContext="{Binding Groups}" >
              <DataTemplate>
                  <ListView Background="Red"
                      ItemsSource="{Binding}"
                      IsItemClickEnabled="True">
                      <ListView.ItemTemplate>
                          <DataTemplate>
                              <StackPanel Margin="0,0,0,27.5">
                                  <TextBlock Text="{Binding Title}" FontSize="29"/>
                              </StackPanel>
                          </DataTemplate>
                      </ListView.ItemTemplate>
                  </ListView>
              </DataTemplate>
          </HubSection>

    ...and tried it on Windows Phone (where it did what I expect).

    And Windows, where it didn't.

    My conclusion is that Windows acts differently, either by design (please explain both why and why this also doesn't run contrary to the Universal Apps philosophy of being able to port easily between platforms), or because of a bug.

    It also doesn't seem this is a designer bug, because the Windows app with the sample shows the same lack of background as the designer, leading me to believe that there too, the height information is somehow not present (in just Windows -- not Windows Phone)

    I do know that there is a lot hidden behind the scenes here, and obviously the platform code hides a lot of complexities, so I have no problem adding XAML or code-behind.  Just would like to see things work as I would expect.

    Still, it is unfortunate that things don't "just work".

    -thanks
    -e


    -- me --


    Sunday, October 19, 2014 6:09 PM
  • The "grid" example (the first example above), with code like this:

    <HubSection Width="500" x:Uid="Section1Header" Header="Next 1">
        <DataTemplate>
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="1*" />
                    <RowDefinition Height="2*" />
                    <RowDefinition Height="3*" />
                </Grid.RowDefinitions>
    
                <Rectangle Fill="Red" Grid.Row="0" />
                <Rectangle Fill="Blue" Grid.Row="1" />
                <Rectangle Fill="Green" Grid.Row="2" />
            </Grid>
        </DataTemplate>
    </HubSection>

    does similarly on Windows Phone

    Compared to Windows,

    so it appears this problem IS related to a difference in the way the two platforms work, and to me, at least, totally unexpected.

    -e


    -- me --

    Sunday, October 19, 2014 10:06 PM
  • Did you mean this is a bug? I think you should post on Microsoft connect.
    Monday, October 20, 2014 2:45 PM
  • It appears to be.  I'm looking to see if someone else can duplicate it first, I guess

    Listeners:

    Following my first or second replies, just try that section in place of the hubsection for phone, and then do the same for Windows.  Can you duplicate it?

    -thanks
    -e


    -- me --

    Tuesday, October 21, 2014 2:05 AM
  • Input?  PPPPleeease?

    -thanks
    -e


    -- me --

    Wednesday, October 22, 2014 1:33 AM
  • Can you send a project for reproduce? It seems right on my computer.
    Thursday, October 23, 2014 7:48 AM
  • This should be the repro project.

    http://1drv.ms/1sTc98b


    -- me --

    Thursday, October 23, 2014 1:04 PM
  • i added it above

    -- me --

    Thursday, October 23, 2014 1:06 PM
  • This is expected behaviour. Hubs are deliberately tuned differently for Windows and Windows Phone screen sizes and shapes. This is common with many controls. Because the UI design needs to be tuned for different screens sharing UI for complex apps is often not recommended. The default Universal app templates all have separate UI modules in the platform specific projects rather than in the Shared project.

    For the HubSections specifically, look at how they work on the two platforms. On the narrower Windows Phone the HubSections default to the screen's width (less a margin). On the larger Windows the HubSections don't have a default width but match their contents.

    That follows your results: on the phone the Grid grows to the defined size if the HubSection.

    On Windows the HubSection and Grid are trying to size off of each other and need more information. 

    Thursday, October 23, 2014 1:35 PM
    Owner
  • I thank you for your time.

    I know you're very busy and I don't ask stupid questions.

    I just wonder if there are a lot more people out there who are confused the same way I am, and wonder if a tweak to the documentation makes sense.

    I'll try to investigate more next time before I inquire.

    -thanks
    -e


    -- me --

    Thursday, October 23, 2014 7:59 PM