silverlight - 将控件宽度设置为其他控件宽度的百分比

Question

我正在尝试开发某种进度指示器控件，基本上这只是两个边界。内层（绿色）的宽度必须等于外层（灰色）宽度的某个百分比。这是我的 XAML：

<Border 
   Background="Gray"
   HorizontalAlignment="Stretch" />
<Border  
   Background="DarkGreen"
   HorizontalAlignment="Left"
   Width="..Something?" />
<TextBlock Text="{Binding Title}" />   

我的视图模型有 2 个属性：

public string Title {get;set;}
public double Progress {get;set;} //between 0 and 1

如何设置绿色边框宽度以使其看起来像下图（此示例在 xaml 中硬编码）？

Answer 1

当容器大小发生变化时，我会使用 System.Windows.InteractivityEventTrigger以及InvokeCommandAction更新视图模型中的属性：ProgressWidth

<Border 
   Background="Gray"
   HorizontalAlignment="Stretch">
    <i:Interaction.Triggers>
        <i:EventTrigger EventName="SizeChanged">
            <i:InvokeCommandAction Command="{Binding SetWidthCommand}"
                CommandParameter="{Binding RelativeSource={RelativeSource Self},Path=ActualWidth}" />
        </i:EventTrigger>
    </i:Interaction.Triggers>
</Border>
<Border  
   Width="{Binding ProgressWidth}"
   Background="DarkGreen"
   HorizontalAlignment="Left"
   Width="..Something?" />

这SetWidthCommand将是, 并且应该使用适当的公式（即（双）参数 * Progress/100.0）在视图模型中DelegateCommand<double>简单地设置一个新属性。ProgressWidth

SetWidthCommand = new DelegateCommand(arg => (double)arg * Progress/100.0);