WPF how to make a navigation control

Question

Hi, being new to WPF this is a complex problem for me. What i want is a "panel" at the bottom approx. 50px in height. On that panel i want e.g. 3 imagebuttons (an arbitrary number) centered in the bar. And when i hover each of the buttons they should grow in size by e.g. 10 px so it looks cool. Most important, how to make the bar and the buttons, second how to make the hover effect?

Answer 1

Use a DockPanel to fix the 'bar' at the bottom, use a grid to get your spacing and an trigger to control the growth.

Here's some code to try. With the DockPanel, you put the things you want to dock in first and then whatever's left doesn't need to be docked and with LastChildFill fills the remaining space.

I like Grids for layouts. I've used the '*' width on the columns: they mean 'remaning space' like in HTML. If you use > 1, WPF divvies up the remaining space equally. So you get centred, spaced buttons.

And I've used a Style trigger to achieve the growth. These values are relative, not absolute, hence the centres being 0.5 (i.e. halfway across/down the button) and the Scale being 1.1. Since I don't know what size your buttons will be, I can't give you the scale factor but if you want 10px (as opposed to the 10 per cent that I've given) get your calculator out and do ((width + 10)/width) for your width scale factor, likewise for height.

<Grid>
    <Grid.Resources>
        <Style TargetType="{x:Type Button}">
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="RenderTransformOrigin" Value=".5,.5" />
                    <Setter Property="RenderTransform">
                        <Setter.Value>
                            <ScaleTransform ScaleX="1.1" ScaleY="1.1" />
                        </Setter.Value>
                    </Setter>
                </Trigger>
            </Style.Triggers>
        </Style>
    </Grid.Resources>

    <DockPanel LastChildFill="True">

        <Grid DockPanel.Dock="Bottom">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>

            <Button Grid.Column="1" Margin="6"
                    Content="Button 1" />
            <Button Grid.Column="2" Margin="6"
                    Content="Button 2" />
            <Button Grid.Column="3" Margin="6"
                    Content="Button 3" />
        </Grid>

        <Grid>
            <Label>Hello</Label>
        </Grid>
    </DockPanel>
</Grid>