About Application ApplicationBar

Wiki Link: [discussion:401282]
jsaer
Oct 30, 2012 at 5:28 PM

It seems that on a 3-row grid, the application bar takes double the space than it should.

The grid row configuration it is the following:

<RowDefinition Height="Auto" />

<RowDefinition Height="*" />

<RowDefinition Height="Auto" /> <!-- This is the AppBar container -->

 

The AppBar shows up just if it were expanded by clicking the elipsis, but it's not... this area shows blank taking up extra space. 

Any suggestions?

Thanks.
BitKFu
Coordinator
Nov 1, 2012 at 3:25 PM

Hi Jsaer,

I tried that and it worked like a charm. Have a look at the following example (it's a little bit re-arranged ApplicationBar Demo).

    <Grid>
        
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*"    />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>

        <TextBlock Grid.Row="0"
                   Text="FIRST ROW"
                   HorizontalAlignment="Center"
                   VerticalAlignment="Center"
                   Style="{StaticResource WinTextTitle1Style}"/>

        <TextBlock Grid.Row="1"
                   Text="{Binding SelectedText}"
                   HorizontalAlignment="Center"
                   VerticalAlignment="Center"
                   Style="{StaticResource WinTextExtraLargeStyle}"/>
        
        <AppBar:ApplicationBar Grid.Row="2">
            <AppBar:ApplicationBar.Icons>
                <AppBar:ApplicationBarIcon ImageSource="/TpMetroWpfLibrary;component/Images/appbar.prev.png"
                                           Description="previous"
                                           Command="{Binding PrevCommand}"/>
                <AppBar:ApplicationBarIcon ImageSource="/TpMetroWpfLibrary;component/Images/appbar.next.png"
                                           Description="next"
                                           Command="{Binding NextCommand}"/>
            </AppBar:ApplicationBar.Icons>
            
            <AppBar:ApplicationBar.MenuItems>
                <AppBar:ApplicationBarMenuItem Description="Next Month" Command="{Binding NextCommand}"/>
                <AppBar:ApplicationBarMenuItem Description="Previous Month" Command="{Binding PrevCommand}"/>
            </AppBar:ApplicationBar.MenuItems>
            
        </AppBar:ApplicationBar>
        
    </Grid>

BitKFu
Coordinator
Nov 1, 2012 at 3:26 PM

Remark: Maybe you've forgotten to place the application bar into the second grid row...
Sign in to post message or set email notifications