locked
How to solve ViewBox with Grid scaling RRS feed

  • Question

  • Hi,

    I have simple problem I can't figure out how to solve. I have a main grid with relative sizes for columns, it has two columns at .45* and .55* for width, and three rows. In the middle row (row 1) and first column (column 0) I have placed another grid with 1 column, five rows and a button inside each row. Rows are proportionally equally sized in height for .20* and the grid width is left to auto. Now I placed this grid inside a viewbox to scale it's contents to UniformToFill. Then the grid just loose it's size. I have read that the viewbox needs a discrete sized object inside. I tried to place a border containing the viewbox and bind to it's actual size, without success. The element hierarchy is like <border><vibewbox><grid><buttons>. Actual XAML follows...

    	<Border Name="dummy" Grid.Column="0" Grid.Row="1">
          <Viewbox Name="vboxButtons" Stretch="UniformToFill">
            <Grid Name="GridButtons">
              <Grid.RowDefinitions>
                <RowDefinition Height=".20*"/>
                <RowDefinition Height=".20*"/>
                <RowDefinition Height=".20*"/>
                <RowDefinition Height=".20*"/>
                <RowDefinition Height=".20*"/>
              </Grid.RowDefinitions>
              <Grid.ColumnDefinitions>
                <ColumnDefinition/>
              </Grid.ColumnDefinitions>
              <Button Grid.Row="0" Content="Sample 1" HorizontalAlignment="Stretch" Name="btn_1" VerticalAlignment="Stretch" Padding="5" Margin="3" BorderThickness="1" Cursor="Hand" OverridesDefaultStyle="False" UseLayoutRounding="False" FontSize="25" FontWeight="Bold" HorizontalContentAlignment="Left" Foreground="Black" Background="#FFE62F2F" Focusable="False" FontFamily="Verdana" >
              </Button>
              <Button Grid.Row="1" Content="Sample largeeeeeeeeeeeeeeeeeeeee" HorizontalAlignment="Stretch" Name="btn_2" VerticalAlignment="Stretch" Background="#FF22BE22" Padding="5" Margin="3" BorderThickness="1" Cursor="Hand" OverridesDefaultStyle="False" UseLayoutRounding="False" FontSize="25" FontWeight="Bold" HorizontalContentAlignment="Left" Foreground="Black" Focusable="False" FontFamily="Verdana" >
              </Button>
              <Button Grid.Row="2" Content="Sample 2" HorizontalAlignment="Stretch" Name="btn_3" VerticalAlignment="Stretch" Background="#FFA411A4" Padding="5" Margin="3" BorderThickness="1" Cursor="Hand" OverridesDefaultStyle="False" UseLayoutRounding="False" FontSize="25" FontWeight="Bold" HorizontalContentAlignment="Left" Foreground="Black" Focusable="False" FontFamily="Verdana" />
              <Button Grid.Row="3" Content="Sample 3" HorizontalAlignment="Stretch" Name="btn_4" VerticalAlignment="Stretch" Background="#FF0034D3" Padding="5" Margin="3" BorderThickness="1" Cursor="Hand" OverridesDefaultStyle="False" UseLayoutRounding="False" FontSize="25" FontWeight="Bold" HorizontalContentAlignment="Left" Foreground="Black" Focusable="False" FontFamily="Verdana" />
              <Button Grid.Row="4" Content="Sample 4" HorizontalAlignment="Stretch" Name="btn_5" VerticalAlignment="Stretch" Background="#FFC86115" Padding="5" Margin="3" BorderThickness="1" Cursor="Hand" OverridesDefaultStyle="False" UseLayoutRounding="False" FontSize="25" FontWeight="Bold" HorizontalContentAlignment="Left" Foreground="Black" Focusable="False" FontFamily="Verdana" />
            </Grid>
          </Viewbox>
        </Border>
    

    The goal that the buttons resize the font to the same size and fill each row cell. Any help is appreciated. If I change the stretch property of the viewbox to fill or Uniform, the grids width is OK but the height of the buttons doesn't scale. With UniformToFill to grid with is out of bounds, the buttons render truncated in width.

    Regards,

    MarianoC.

     

     

    Tuesday, August 2, 2011 7:58 PM

Answers

  • Hi MarianoC.

    Please try the following code.

      <Border Name="dummy" Grid.Column="0" Grid.Row="1">
        <Viewbox Name="vboxButtons" Stretch="Fill">
          <Grid Name="GridButtons">
            <Grid.RowDefinitions>
              <RowDefinition Height="Auto"/>
              <RowDefinition Height="Auto"/>
              <RowDefinition Height="Auto"/>
              <RowDefinition Height="Auto"/>
              <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
              <ColumnDefinition/>
            </Grid.ColumnDefinitions>
            <Button Grid.Row="0" Content="Sample 1" HorizontalAlignment="Stretch" Name="btn_1" VerticalAlignment="Stretch" Padding="5" Margin="3" BorderThickness="1" Cursor="Hand" OverridesDefaultStyle="False" UseLayoutRounding="False" FontSize="25" FontWeight="Bold" HorizontalContentAlignment="Left" Foreground="Black" Background="#FFE62F2F" Focusable="False" FontFamily="Verdana" >
            </Button>
            <Button Grid.Row="1" Content="Sample largeeeeeeeeeeeeeeeeeeeee" HorizontalAlignment="Stretch" Name="btn_2" VerticalAlignment="Stretch" Background="#FF22BE22" Padding="5" Margin="3" BorderThickness="1" Cursor="Hand" OverridesDefaultStyle="False" UseLayoutRounding="False" FontSize="25" FontWeight="Bold" HorizontalContentAlignment="Left" Foreground="Black" Focusable="False" FontFamily="Verdana" >
            </Button>
            <Button Grid.Row="2" Content="Sample 2" HorizontalAlignment="Stretch" Name="btn_3" VerticalAlignment="Stretch" Background="#FFA411A4" Padding="5" Margin="3" BorderThickness="1" Cursor="Hand" OverridesDefaultStyle="False" UseLayoutRounding="False" FontSize="25" FontWeight="Bold" HorizontalContentAlignment="Left" Foreground="Black" Focusable="False" FontFamily="Verdana" />
            <Button Grid.Row="3" Content="Sample 3" HorizontalAlignment="Stretch" Name="btn_4" VerticalAlignment="Stretch" Background="#FF0034D3" Padding="5" Margin="3" BorderThickness="1" Cursor="Hand" OverridesDefaultStyle="False" UseLayoutRounding="False" FontSize="25" FontWeight="Bold" HorizontalContentAlignment="Left" Foreground="Black" Focusable="False" FontFamily="Verdana" />
            <Button Grid.Row="4" Content="Sample 4" HorizontalAlignment="Stretch" Name="btn_5" VerticalAlignment="Stretch" Background="#FFC86115" Padding="5" Margin="3" BorderThickness="1" Cursor="Hand" OverridesDefaultStyle="False" UseLayoutRounding="False" FontSize="25" FontWeight="Bold" HorizontalContentAlignment="Left" Foreground="Black" Focusable="False" FontFamily="Verdana" />
          </Grid>
        </Viewbox>
      </Border>
    

     

     

    Hope this helps.

    Best regards,

     


    Min Zhu [MSFT]
    MSDN Community Support | Feedback to us
    Get or Request Code Sample from Microsoft
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    • Marked as answer by Min Zhu Thursday, August 11, 2011 6:03 AM
    Saturday, August 6, 2011 8:41 AM