Vinculando propiedad de dependencia personalizada al estilo personalizado de WPF

Question

Tengo un problema al diseñar un expansor heredado. Mi intención es tener una barra de progreso detrás del botón para alternar y el texto en el encabezado Expander predeterminado.

Tengo este código XAML que me da la barra de progreso en el encabezado. Es un estilo personalizado.

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

esto funciona bien pero tengo problemas para enlazar mi propiedad de dependencia personalizada que controla el porcentaje de progreso.

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


} 

Este es el código dentro de la ventana:

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

No estoy seguro de cómo enlazar esta dependencia progreso propiedad en el valor progreso en el ProgressBar dentro del estilo.

Cualquier ayuda sería apreciada.

Answer 1

En el estilo, podemos usar un enlace estándar con un RelativeSource para configurar la propiedad.

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

Luego, en la ventana solo agregamos Progress = "50" o un enlace a otro lugar.

También deberá configurar el fondo del botón como transparente, o cambiar el diseño para poder verlo.