如何根据 Slider 值更改 ListboxItem 大小 [英] How to change ListboxItem Size with respect to Slider value

问题描述

我有两个用户控件，分别是 Usercntrl1" 和 Usercntrl2"，Usercntrl1"包含 Slider，Usercntr2"包含 带图像的列表框，现在当我更改Usercntrl1"中的 滑块值 时，ListboxItems 大小(即)宽度和高度 必须随 Respect 更改为滑块值.当它们都出现在同一个用户控件中时，可以轻松完成，如下所示

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>

有人可以指导吗?

推荐答案

如果你真的需要从一个用户控件绑定到另一个用户控件的属性也许你可以使用这样的东西:

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

用户cntrl1:Xaml:

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>

代码隐藏:

...
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:

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>

代码隐藏:

---
      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}"/>

所以如果 Usercntrl1 托管 UserControl2，它看起来像这样:

so if Usercntrl1 hosts UserControl2 it looks like this:

用户cntrl1:

<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>

或:

    <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>

用户控件1XAML:

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

后面的代码:

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

这篇关于如何根据 Slider 值更改 ListboxItem 大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！