установить ширину управления в процентах от другой ширины управления

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

Я хотел бы использовать System.Windows.Interactivity EventTrigger, наряду с InvokeCommandAction, чтобы обновить ProgressWidth свойство в модели представления, когда контейнер size changes:

<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 будет a DelegateCommand<double> и должен просто установить новое свойство ProgressWidth в модели представления, используя соответствующую формулу (т. е. (двойной) параметр * Progress/100.0).

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