Make content inside Button responsive in WPF

Question

I have vertical navigation bar. Each button of the navigation has it's own image and text. For now the image has static height set to Height="50"and text has the default value. When I resize the window the buttons grow responsive but the content inside keeps the same size. This is how it look right now: https://gyazo.com/48cff48437b66f462dccd23639dd59ac (GIF)

My XAML code:

  <Grid>
    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="10*"/>
      <ColumnDefinition Width="2*"/>
    </Grid.ColumnDefinitions>
    <UniformGrid Background="DodgerBlue" Grid.Column="1" Columns="1">

      <Button BorderThickness="0" Background="DodgerBlue">
        <StackPanel>
          <Image Source="Icons/home-5-xxl.png" Height="50" Margin="0,0,0,10"/>
          <TextBlock HorizontalAlignment="Center" Foreground="White" FontWeight="Bold">Home</TextBlock>
        </StackPanel>
      </Button>

      <Button BorderThickness="0" Background="DodgerBlue">
        <StackPanel>
          <Image Source="Icons/search-3-xxl.png" Height="50" Margin="0,0,0,10"/>
          <TextBlock HorizontalAlignment="Center" Foreground="White" FontWeight="Bold">Search</TextBlock>
        </StackPanel>
      </Button>

      <Button BorderThickness="0" Background="DodgerBlue">
        <StackPanel>
          <Image Source="Icons/twitter-xxl.png" Height="50" Margin="0,0,0,10"/>
          <TextBlock HorizontalAlignment="Center" Foreground="White" FontWeight="Bold">Twitter</TextBlock>
        </StackPanel>
      </Button>

      <Button BorderThickness="0" Background="DodgerBlue">
        <StackPanel>
          <Image Source="Icons/chat-4-xxl.png" Height="50" Margin="0,0,0,10"/>
          <TextBlock HorizontalAlignment="Center" Foreground="White" FontWeight="Bold">Chat</TextBlock>
        </StackPanel>
      </Button>

    </UniformGrid>
  </Grid>

How could i make content inside the Buttons responsive and grow when the button grows in XAML WPF?

Possible duplicate of [Resize image in WPF](https://stackoverflow.com/questions/15779564/resize-image-in-wpf) — Amittai Shapira, Sep 26 '18 at 12:10
@AmittaiShapira I am asking for a solution in the XAML code and not in the code-behind — Nightscape, Sep 26 '18 at 12:13

score 2 · Accepted Answer · answered Sep 26 '18 at 12:24

2

Use Viewbox as shown here.

<Viewbox Stretch="Uniform">
   <Button ... />
</Viewbox>

answered Sep 26 '18 at 12:24

l33t

18,692
16
103
180

Make content inside Button responsive in WPF

1 Answers1