How to change ListboxItem Size with respect to Slider value

Question

I have two Usercontrols say "Usercntrl1" and "Usercntrl2", "Usercntrl1" contains Slider, "Usercntr2" has ListBox with Images, Now when i change the Slider value in "Usercntrl1" ,the ListboxItems size(i.e,) Width and Height has to change with Respect to Slider value. It can be easily done when both of them present in same usercontrol as follows

<ListBox.ItemContainerStyle>
                    <Style TargetType="{x:Type ListBoxItem}">
                        <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
                        <Setter Property="VerticalContentAlignment" Value="Stretch"/>
                        <Setter Property="Padding" Value="0"/>
                        <Setter Property="Margin" Value="1"/>
                        <Setter Property="BorderBrush" Value="Green"/>
                        <Setter Property="Width" Value="{Binding Path=Value, ElementName=sizeSlider, Mode=TwoWay}"/>
                        <Setter Property="Height" Value="{Binding Path=Value, ElementName=sizeSlider, Mode=TwoWay}"/>
                         <Setter Property="TabIndex" Value="1"/>
                                           </Style>
                </ListBox.ItemContainerStyle>

could somebody guide?

rhe1980 · Accepted Answer · 2013-07-11T12:02:36.353

If you really need to bind from one usercontrol to a property of another UserControl maybe you can use something like this:

Usercntrl1: Xaml:

<UserControl x:Class="ListBoxSliderSizeTest.Usercntrl1"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
         mc:Ignorable="d" 
         d:DesignHeight="300" d:DesignWidth="300" x:Name="MainControl">
   <Grid>
      <Slider Maximum="200" Minimum="1" Value="{Binding ElementName=MainControl, Path=SliderSize, Mode=TwoWay}"/>   
   </Grid>

CodeBehind:

...
public double SliderSize
  {
     get { return (double)GetValue(SliderSizeProperty); }
     set { SetValue(SliderSizeProperty, value); }
  }

  public static readonly DependencyProperty SliderSizeProperty =
      DependencyProperty.Register("SliderSize", typeof(double), typeof(Usercntrl1), new PropertyMetadata(0.0));
...

UserCntrl2: XAML:

<UserControl x:Class="ListBoxSliderSizeTest.Usercntrl2"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
         mc:Ignorable="d" 
         d:DesignHeight="300" d:DesignWidth="300" x:Name="MainControl">
<Grid>
        <ListBox>
            <ListBox.ItemContainerStyle>
            <Style TargetType="{x:Type ListBoxItem}">
                <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
                <Setter Property="VerticalContentAlignment" Value="Stretch"/>
                <Setter Property="Padding" Value="0"/>
                <Setter Property="Margin" Value="1"/>
                <Setter Property="BorderBrush" Value="Green"/>
                <Setter Property="Width" Value="{Binding Path=SliderSize, ElementName=MainControl, Mode=OneWay}"/>
                <Setter Property="Height" Value="{Binding Path=SliderSize, ElementName=MainControl, Mode=OneWay}"/>
                <Setter Property="TabIndex" Value="1"/>
            </Style>

        </ListBox.ItemContainerStyle>
            <Button/>
        </ListBox>
</Grid>

CodeBehind:

---
      public double SliderSize
  {
     get { return (double)GetValue(SliderSizeProperty); }
     set { SetValue(SliderSizeProperty, value); }
  }

  public static readonly DependencyProperty SliderSizeProperty =
      DependencyProperty.Register("SliderSize", typeof(double), typeof(Usercntrl2), new PropertyMetadata(0.0));
...

And then use this two Usercontrols:

<listBoxSliderSizeTest:Usercntrl1 x:Name="Usercntrl1"/>
    <listBoxSliderSizeTest:Usercntrl2 Grid.Column="1" SliderSize="{Binding ElementName=Usercntrl1, Path=SliderSize}"/>

Edit:

so if Usercntrl1 hosts UserControl2 it looks like this:

Usercntrl1:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition/>
    </Grid.RowDefinitions>
    <Slider Maximum="200" Minimum="1" Value="{Binding ElementName=MainControl, Path=SliderSize, Mode=TwoWay}" x:Name="Slider"/>
    <listBoxSliderSizeTest:Usercntrl2 Grid.Row="1" SliderSize="{Binding ElementName=MainControl, Path=SliderSize}" />
</Grid>

or:

    <Grid>
    <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition/>
    </Grid.RowDefinitions>
    <Slider Maximum="200" Minimum="1" x:Name="Slider"/>
    <listBoxSliderSizeTest:Usercntrl2 Grid.Row="1" SliderSize="{Binding ElementName=Slider, Path=Value}" />
</Grid>

edit2:

Usercontrol1 XAML:

<Slider Maximum="200" Minimum="1" x:Name="Slider" Value="{Binding ElementName=MainControl, Path=SliderSize, Mode=TwoWay}" />
<TabControl x:Name="tc" Grid.Row="1"/>

Code behind:

var uc = new Usercntrl2();
     var binding = new Binding("SliderSize") { Source = this,Mode = BindingMode.TwoWay};
     uc.SetBinding(Usercntrl2.SliderSizeProperty, binding);
     tc.Items.Add(uc);

thanx a lot, its working perfect in prototype and moreover i have doubt in my scenario, which is **Usercntrl1 as SliderUsrcntrl** hosts **Usercntrl2 as ListboxUsrcntrl**, so i registered the **SliderSize dependency property**, in both the usercntrls now in ListboxUsrcntrl XAML i want to assign the value of **ListboxUsrcntrl Slidersize** as **`ListboxUsrcntrl.SliderSize="{Binding ElementName=Slider Path=SliderSize}"`** i don know where to code like this. thanx in advance. — Selva, Jul 11 '13 at 10:51
I edited my sample. But I'm not sure what your question was in your comment above — rhe1980, Jul 11 '13 at 11:11
@ rhe ,thanx again and i'm confused with my scenario,actually **Usercntrl1 contains Tabcontrol and Slider where tabitems are loaded dynamically in code behind which is usercntrl2(listbox), usercntrl1 has no reference in XAML as u mentioned above**, so i'm jus stuck with assigning usercntrl2 Slidervalue, sry for nusense. whatever you have given its working perfectly when i do it as prototype. it is like i have to assign **`usecntrl2.SliderSize="{Binding ElementName=usercntrl1, Path=SliderSize}"`** in **usercntrl2XAML** itself, is it so? is this rite way of doin this. thanx again. — Selva, Jul 11 '13 at 11:41
now I'm confused a bit ;-) you want to create the binding in code behind? then the binding looks like in edit2 in my sample. or usercntrl1 does not know the usercntrl2 at all? — rhe1980, Jul 11 '13 at 12:02
again one small doubt:-) when i change the slider value, listboxitems sizes are getting changed its fine but the prob is it applies to all tabitem, i jus want this to only active tab.. — Selva, Jul 12 '13 at 08:10

score 0 · Answer 2 · answered Jul 12 '13 at 09:32

0

for your question in your last comment (apply the size only to the active item):

use a trigger:

 <Style.Triggers>
    <DataTrigger Binding="{Binding RelativeSource={RelativeSource Self}, Path=IsSelected}" Value="True">
       <Setter Property="Width" Value="{Binding Path=SliderSize, ElementName=MainControl, Mode=OneWay}"/>
       <Setter Property="Height" Value="{Binding Path=SliderSize, ElementName=MainControl, Mode=OneWay}"/>
    </DataTrigger>
 </Style.Triggers>

or do you want apply it for all items in the active tab?

answered Jul 12 '13 at 09:32

rhe1980

1,557
1
15
36

no, i need it only for listboxitems, and wat if i want to apply to all items? where do i apply this trigger usercntrl1(TabControl) or usercntrl2(Listbox)? and moreover rite now all tab items contains Listbox with images as listboxitem, andsupppose if i have more controls other than listbox is it possible to apply slidersize value to all items present in present active tab? – Selva Jul 12 '13 at 10:18

How to change ListboxItem Size with respect to Slider value

2 Answers2

Linked