Is there a way I can trigger a property change by parent's size change?

Question

I am having multiple list boxes that sit inside a Grid. Each listbox is separated by a GridSplitter.

Each ListBoxItem has a datatemplate that display multi-line of data. What I want is, when the listbox is resized (by the GridSplitter), the ListBoxItem DataTemplate can update accordingly (to show different level of details, e.g. when the size is smaller than a number, I will hide some content).

I am now listening to SizeChanged on the ListBox and then set a property on my custom ListBox, the controls in DataTemplate will bind to the property to show or hide.

For example, I have a property on my ListBox)

 MediumSize = (ActualWidth > 200 && ActualWidth < 400);

In my Xaml, some controls' Visibility will bind to this property.

It works. But it's silly, because apparently I can only use one "Size" level.

Is there any better way?

Thanks

WPFUser WPFUser · Accepted Answer · 2014-03-12T05:54:49

as Blam said try this, Using valueconverter

<Window.Resources>
        <local:HeightToTemplateConverter x:Key="HeightToTemplateConverter"/>
        <DataTemplate x:Key="three">
            <StackPanel>
                <TextBlock Text="{Binding FName}"/>
                <TextBlock Text="{Binding SName}"/>
                <TextBlock Text="{Binding Age}"/>
            </StackPanel>
        </DataTemplate>
        <DataTemplate x:Key="two">
            <StackPanel >
                <TextBlock Text="{Binding FName}"/>
                <TextBlock Text="{Binding SName}"/>
            </StackPanel>
        </DataTemplate>
        <DataTemplate x:Key="one">
            <StackPanel Orientation="Horizontal">
                <TextBlock Text="{Binding FName}"/>
                <TextBlock Text="{Binding SName}"/>
            </StackPanel>
        </DataTemplate>
    </Window.Resources>
    <Grid Height="300" Width="500">
        <Grid.RowDefinitions>
            <RowDefinition  />
            <RowDefinition Height="Auto" />
            <RowDefinition  />
        </Grid.RowDefinitions>

            <ListBox Grid.Row="0" ItemTemplate="{Binding ActualHeight, RelativeSource={RelativeSource Mode=Self}, Converter={StaticResource HeightToTemplateConverter}, UpdateSourceTrigger=PropertyChanged}" ItemsSource="{Binding MyColl}" />

        <GridSplitter Grid.Row="1" Height="5" ResizeDirection="Rows" Background="Red" VerticalAlignment="Center" HorizontalAlignment="Stretch" />
        <ListBox ItemTemplate="{Binding ActualHeight, RelativeSource={RelativeSource Mode=Self}, Converter={StaticResource HeightToTemplateConverter}, UpdateSourceTrigger=PropertyChanged}" Grid.Row="2" ItemsSource="{Binding MyColl}" />
    </Grid>

code behind :

public partial class MainWindow : Window
    {

        public MainWindow()
        {
            InitializeComponent();
            this.DataContext = new ViewModel();
        }
    }
    public class Model
    {
        private string fname;

        public string FName
        {
            get { return fname; }
            set { fname = value; }
        }
        private string sname;

        public string SName
        {
            get { return sname; }
            set { sname = value; }
        }
        private int age;

        public int Age
        {
            get { return age; }
            set { age = value; }
        }


    }
    public class ViewModel
    {
        private ObservableCollection<Model> mycoll;

        public ObservableCollection<Model> MyColl
        {
            get { return mycoll; }
            set { mycoll = value; }
        }
        public ViewModel()
        {
            MyColl = new ObservableCollection<Model>();
            MyColl.Add(new Model { FName = "Muthu", SName = "Kumar", Age = 23 });
            MyColl.Add(new Model { FName = "Muthu", SName = "Kumar", Age = 23 });
            MyColl.Add(new Model { FName = "Muthu", SName = "Kumar", Age = 23 }); MyColl.Add(new Model { FName = "Muthu", SName = "Kumar", Age = 23 });
            MyColl.Add(new Model { FName = "Muthu", SName = "Kumar", Age = 23 });
            MyColl.Add(new Model { FName = "Muthu", SName = "Kumar", Age = 23 });
        }
    }

    public class HeightToTemplateConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            if (Double.Parse(value.ToString()) >= 100)
                return App.Current.MainWindow.Resources["three"] as DataTemplate;
            if (Double.Parse(value.ToString()) <= 100 && Double.Parse(value.ToString()) >= 60)
                return App.Current.MainWindow.Resources["two"] as DataTemplate;
             if (Double.Parse(value.ToString()) < 60)
                return App.Current.MainWindow.Resources["one"] as DataTemplate;
            return null;
        }


        public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }

it is just a tryout,let me know if it helps.

Thanks Kumar

Is there a way I can trigger a property change by parent's size change?

1 Answers