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

Question

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

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

我的viewmodel有2个属性：

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

如何设置绿色边框宽度使其看起来如下图所示（对于此示例，它在xaml中是硬编码的）？

Answer 1

当容器EventTrigger：<时，我会使用System.Windows.Interactivity InvokeCommandAction和size changes更新视图模型中的ProgressWidth属性/ p>

<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将是DelegateCommand<double>，并且应该使用适当的公式（即（双）参数* Progress / 100.0）在视图模型中设置新的ProgressWidth属性

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