locked
Using the SearchBox inside the Hub Header

    Question

  • Hi,

    I was wanting to use a Hub control on my main page, where the App Title goes in the Header along with a right justified SearchBox. I can't seem to get the Header part of the Hub to span the entire width of the page. Some simple XAML to show what I mean:

            <Hub>
                <Hub.Header>
                    <Grid >
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="300"/>
                            <ColumnDefinition Width="*" />
                        </Grid.ColumnDefinitions>
                        
                        <TextBlock Text="My App" />
                        <SearchBox Grid.Column="1" Width="300" HorizontalAlignment="Right"/>
                    </Grid>
                </Hub.Header>
            </Hub>
    

    I can do this type of header in a plain grid. Does this mean I should have a Grid as the parent with two rows, the top row for the app title and search box and the second row for the hub control?

    Thanks for your help.

    Graham

    Monday, April 21, 2014 12:47 PM

Answers

  • The Hub.Header doesn't have an inherent width of the page, so the Grid's default width will match its contents. You can explicitly set the Grid's width to get it to stretch out. You can bind to a page width property on your page.

    Alternatively, you can place the SearchBox on top of the hub visually but outside its logical structure.

    --Rob


    Monday, April 21, 2014 10:43 PM
    Moderator

All replies

  • The Hub.Header doesn't have an inherent width of the page, so the Grid's default width will match its contents. You can explicitly set the Grid's width to get it to stretch out. You can bind to a page width property on your page.

    Alternatively, you can place the SearchBox on top of the hub visually but outside its logical structure.

    --Rob


    Monday, April 21, 2014 10:43 PM
    Moderator
  • Thanks.

    In the end, I didn't use the Header section of the Hub, I put the Hub in a Grid, row 1. Row 0 contained my Page title and Search Box (right justified).

    Please let me know if I have done this wrong.

    Regards

    Wednesday, April 30, 2014 1:02 PM
  • That sounds reasonable. That's what I meant by putting the SearchBox on top of the Hub visually but outside its logical structure. It's probably the way I would do this in my own app.

    --Rob

    Wednesday, April 30, 2014 2:17 PM
    Moderator