Question

I'm trying to find a way to display a horizontal List of items in WPF, the trick is that the Window which contains the List will be displayed on various screen sizes and all the items in the list need to be resized to fill the available space without any use of scroll bars.

I've found that a ViewBox control can be used to achieve the desired affect, but the ViewBox works only if I set <RowDefinition Height="300"/>.This approach doesn't work because if you have a certain number of items in the List they start becoming cut off.

If I remove <RowDefinition Height="300"/> then the first item in the list fills the screen and the rest are cut off

Any suggestions on how I can make all the items in the list resize to fill the available space no matter what the screen resolution is?

XAML:

<Window x:Class="ViewBoxExample.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" WindowState="Maximized">
    <ItemsControl ItemsSource="{Binding Path=Employees}">
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="3*" />
                        <ColumnDefinition Width="3*" />
                        <ColumnDefinition Width="3*" />
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="300"/>
                    </Grid.RowDefinitions>
                    <Viewbox Grid.Row="0" Grid.Column="0">
                        <TextBlock Text="{Binding Path=Name}" />
                    </Viewbox>
                    <Viewbox Grid.Row="0" Grid.Column="1">
                        <TextBlock Text="{Binding Path=Surname}" />
                    </Viewbox>
                    <Viewbox Grid.Row="0" Grid.Column="2">
                        <TextBlock Text="{Binding Path=Age}" />
                    </Viewbox>
                </Grid>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>
</Window>

C#:

using System.Collections.Generic;
using System.Windows;

namespace ViewBoxExample
{
    public partial class MainWindow : Window
    {
        public List<Employee> _employees = new List<Employee>();
        public List<Employee> Employees 
        {
            get { return _employees; }
            set { _employees = value; }
        }

        public MainWindow()
        {
            InitializeComponent();

            Employees = new List<Employee>()
            {
                new Employee{ Name="Name1",Surname="Surname1",Age=20},
                new Employee{ Name="Name2",Surname="Surname2",Age=30},
                new Employee{ Name="Name3",Surname="Surname3",Age=40},
                new Employee{ Name="Name4",Surname="Surname4",Age=50},
                new Employee{ Name="Name5",Surname="Surname5",Age=60},
            };
            this.DataContext = this;
        }
    }

    public class Employee
    {
        public string Name { get; set; }
        public string Surname { get; set; }
        public int Age { get; set; }
    }
}
Was it helpful?

Solution

Just put your ItemsControl in ViewBox

<Viewbox>
    <ItemsControl ItemsSource="{Binding Path=Employees}">
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="3*" />
                        <ColumnDefinition Width="3*" />
                        <ColumnDefinition Width="3*" />
                    </Grid.ColumnDefinitions>
                    <Viewbox Grid.Row="0" Grid.Column="0">
                        <TextBlock Text="{Binding Path=Name}" />
                    </Viewbox>
                    <Viewbox Grid.Row="0" Grid.Column="1">
                        <TextBlock Text="{Binding Path=Surname}" />
                    </Viewbox>
                    <Viewbox Grid.Row="0" Grid.Column="2">
                        <TextBlock Text="{Binding Path=Age}" />
                    </Viewbox>
                </Grid>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>
</Viewbox>

EDIT: if i am doing the same type of thing i would use the actual Height and Width approach as explained by Kent Boogaart in this Answer

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top