Ràng buộc tài sản phụ thuộc tùy chỉnh theo kiểu WPF tùy chỉnh

Question

Tôi gặp sự cố khi thiết kế Expander kế thừa. Ý định của tôi là có một thanh tiến trình phía sau nút chuyển đổi và văn bản trong tiêu đề Expander mặc định.

Tôi có mã XAML này cung cấp cho tôi thanh tiến trình trong tiêu đề. Đó là một phong cách tùy chỉnh.

<Style x:Key="CurrentScanExpanderStyle" TargetType="{x:Type local:ProgressExpander}"> 
     <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/> 
     <Setter Property="Background" Value="Transparent"/> 
     <Setter Property="HorizontalContentAlignment" Value="Stretch"/> 
     <Setter Property="VerticalContentAlignment" Value="Stretch"/> 
     <Setter Property="BorderBrush" Value="Transparent"/> 
     <Setter Property="BorderThickness" Value="1"/> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="{x:Type local:ProgressExpander}"> 
        <Border SnapsToDevicePixels="true" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="3"> 
         <DockPanel> 
          <Grid DockPanel.Dock="Top"> 
           <Grid.ColumnDefinitions> 
            <ColumnDefinition Width="*"/> 
           </Grid.ColumnDefinitions> 
           <ProgressBar Name="ProgressBar"/> 
           <ToggleButton FontFamily="{TemplateBinding FontFamily}" FontSize="{TemplateBinding FontSize}" FontStretch="{TemplateBinding FontStretch}" FontStyle="{TemplateBinding FontStyle}" FontWeight="{TemplateBinding FontWeight}" Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" FocusVisualStyle="{StaticResource ExpanderHeaderFocusVisual}" Margin="1" MinHeight="0" MinWidth="0" x:Name="HeaderSite" Style="{StaticResource ExpanderDownHeaderStyle}" IsChecked="{Binding Path=IsExpanded, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" Content="{TemplateBinding Header}" ContentTemplate="{TemplateBinding HeaderTemplate}" ContentTemplateSelector="{TemplateBinding HeaderTemplateSelector}"/> 
          </Grid> 
          <ContentPresenter Focusable="false" Visibility="Collapsed" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" x:Name="ExpandSite" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" DockPanel.Dock="Bottom"/> 
         </DockPanel> 
        </Border> 
        <ControlTemplate.Triggers> 
         <!-- Triggers haven't changed from the default --> 
        </ControlTemplate.Triggers> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 

hoạt động tốt nhưng tôi gặp sự cố khi ràng buộc thuộc tính phụ thuộc của tôi kiểm soát tỷ lệ phần trăm tiến trình.

public class ProgressExpander : Expander 
{ 
    static ProgressExpander() 
    { 
     DefaultStyleKeyProperty.OverrideMetadata(typeof(ProgressExpander), new FrameworkPropertyMetadata(typeof(ProgressExpander))); 
    }  



    public int Progress 
    { 
     get { return (int)GetValue(ProgressProperty); } 
     set { SetValue(ProgressProperty, value); } 
    } 

    // Using a DependencyProperty as the backing store for Progress. This enables animation, styling, binding, etc... 
    public static readonly DependencyProperty ProgressProperty = 
     DependencyProperty.Register("Progress", typeof(int), typeof(ProgressExpander), new UIPropertyMetadata(0)); 


} 

Đây là mã bên trong của cửa sổ:

  <local:ProgressExpander Grid.Row="1" Header="Current Scan" ExpandDirection="Down" x:Name="currentScanExpander" Style="{DynamicResource CurrentScanExpanderStyle}"> 
       <Canvas Background="SkyBlue" 
         Name="currentScanCanvas" 
         Height="{Binding ElementName=currentScanExpander, Path=ActualWidth}" 
         /> 
      </local:ProgressExpander> 

Tôi không chắc chắn làm thế nào để ràng buộc phụ thuộc này tiến bộ tài sản với giá trị tiến bộ trong ProgressBar trong phong cách.

Mọi trợ giúp sẽ được đánh giá cao.

Answer 1

Trong phong cách, chúng ta có thể sử dụng một ràng buộc tiêu chuẩn với một RelativeSource để thiết lập thuộc tính.

<ProgressBar Name="ProgressBar" 
      Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Progress}" 
      Minimum="0" 
      Maximum="100" /> 

Sau đó, trong cửa sổ, chúng tôi chỉ thêm Tiến trình = "50" hoặc liên kết đến một nơi khác.

Bạn cũng sẽ cần đặt nền của nút thành trong suốt hoặc thay đổi cách bố trí để xem.