CODEWITHSUNDEEP
wpfxamlscaling
Brillyints
Brillyints

Reputation: 87

WPF/XAML - Scaling text size to window size

I'm new to WPF. I have a WPF Window with a bunch of Labels on it as well as a ListBox.

When resizing the window, I want to scale the size of SOME of the Labels, but not all of them. I don't want the ListBox to scale either--just some Labels.

I understand I can use a Viewbox to resize as the Window resizes, but as much as I mess with it, I'm not getting the desired effect. Of course I can't surround the entire thing with a Viewbox because that would resize everything, so I figured I would have to drop a bunch of different Viewboxes throughout the Window surrounding each label I want to expand. But of course... nothing expands at all when I do this.

Along the same lines, when I expand the labels, there are other labels that need to remain right next to those labels because they are identifiers.

So... here's the XAML I have at this point. I don't even know if I'm on the right path. Any help making the labels with number in them expand with the window would be appreciated.

<Window x:Class="WpfApplication7.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:WpfApplication7"
    Title="Window1">
    <StackPanel Orientation="Horizontal">
        <ListBox Margin="2">
            <ListBoxItem>a</ListBoxItem>
            <ListBoxItem>b</ListBoxItem>
            <ListBoxItem>c</ListBoxItem>
        </ListBox>
        <StackPanel Orientation="Vertical">
            <Label>Title</Label>
            <StackPanel Orientation="Horizontal">
                <Grid>
                    <Grid.RowDefinitions><RowDefinition/><RowDefinition/><RowDefinition/><RowDefinition/></Grid.RowDefinitions>
                    <Label Grid.Row="0">A</Label>
                    <Label Grid.Row="1">B</Label>
                    <Label Grid.Row="2">C</Label>
                    <Label Grid.Row="3">D</Label>
                </Grid>
                <Grid>
                    <Grid.RowDefinitions><RowDefinition/><RowDefinition/><RowDefinition/><RowDefinition/></Grid.RowDefinitions>
                    <Viewbox Grid.Row="0" Stretch="Fill">
                        <Label>1</Label>
                    </Viewbox>
                    <Viewbox Grid.Row="1" Stretch="Fill">
                        <Label>2</Label>
                    </Viewbox>
                    <Viewbox Grid.Row="2" Stretch="Fill">
                        <Label>3</Label>
                    </Viewbox>
                    <Viewbox Grid.Row="3" Stretch="Fill">
                        <Label>4</Label>
                    </Viewbox>
                </Grid>
                <Grid>
                    <Grid.RowDefinitions><RowDefinition/><RowDefinition/><RowDefinition/><RowDefinition/></Grid.RowDefinitions>
                    <Viewbox Grid.Row="0" Stretch="Fill">
                        <Label>5</Label>
                    </Viewbox>
                    <Viewbox Grid.Row="1" Stretch="Fill">
                        <Label>6</Label>
                    </Viewbox>
                    <Viewbox Grid.Row="2" Stretch="Fill">
                        <Label>7</Label>
                    </Viewbox>
                    <Viewbox Grid.Row="3" Stretch="Fill">
                        <Label>8</Label>
                    </Viewbox>
                </Grid>
                <Grid>
                    <Grid.RowDefinitions><RowDefinition/><RowDefinition/><RowDefinition/><RowDefinition/></Grid.RowDefinitions>
                    <Label Grid.Row="0">E</Label>
                    <Label Grid.Row="1">F</Label>
                    <Label Grid.Row="2">G</Label>
                    <Label Grid.Row="3">H</Label>
                </Grid>
            </StackPanel>
        </StackPanel>
    </StackPanel>
</Window>

Upvotes: 1

Views: 6663

Answers (1)

Charlie
Charlie

Reputation: 15227

You're on the right path. However, you need to use some column definitions, and your row definitions are a bit wonky. You're using a bunch of different layout panels embedded in each other, which is affecting the Viewbox built-in resizing. You can accomplish this exact same layout with a single, simple, 5x5 grid (no stackpanels).

I have demonstrated this in the following XAML:

<Window x:Class="TestWpfApplication.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:TestWpfApplication"
Title="Window1">
<Window.Resources>
    <Style TargetType="{x:Type Label}" x:Key="{x:Type Label}">
        <Setter Property="HorizontalAlignment" Value="Center"/>
        <Setter Property="VerticalAlignment" Value="Center"/>
    </Style>
</Window.Resources>

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition/>
        <RowDefinition/>
        <RowDefinition/>
        <RowDefinition/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition/>
        <ColumnDefinition/>
        <ColumnDefinition/>
        <ColumnDefinition/>
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>

    <ListBox Grid.RowSpan="5" Grid.Column="0">
        <ListBoxItem>a</ListBoxItem>
        <ListBoxItem>b</ListBoxItem>
        <ListBoxItem>c</ListBoxItem>
    </ListBox>

    <Label Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="4">Title</Label>

    <Label Grid.Row="1" Grid.Column="1">A</Label>
    <Label Grid.Row="2" Grid.Column="1">B</Label>
    <Label Grid.Row="3" Grid.Column="1">C</Label>
    <Label Grid.Row="4" Grid.Column="1">D</Label>

    <Viewbox Grid.Row="1" Grid.Column="2">
        <Label>1</Label>
    </Viewbox>
    <Viewbox Grid.Row="2" Grid.Column="2">
        <Label>2</Label>
    </Viewbox>
    <Viewbox Grid.Row="3" Grid.Column="2">
        <Label>3</Label>
    </Viewbox>
    <Viewbox Grid.Row="4" Grid.Column="2">
        <Label>4</Label>
    </Viewbox>

    <Viewbox Grid.Row="1" Grid.Column="3">
        <Label>5</Label>
    </Viewbox>
    <Viewbox Grid.Row="2" Grid.Column="3">
        <Label>6</Label>
    </Viewbox>
    <Viewbox Grid.Row="3" Grid.Column="3">
        <Label>7</Label>
    </Viewbox>
    <Viewbox Grid.Row="4" Grid.Column="3">
        <Label>8</Label>
    </Viewbox>

    <Label Grid.Row="1" Grid.Column="4">E</Label>
    <Label Grid.Row="2" Grid.Column="4">F</Label>
    <Label Grid.Row="3" Grid.Column="4">G</Label>
    <Label Grid.Row="4" Grid.Column="4">H</Label>
</Grid>

Upvotes: 2

Related Questions