spiegelp / MaterialDesignExtensions

Material Design Extensions is based on Material Design in XAML Toolkit to provide additional controls and features for WPF apps
https://spiegelp.github.io/MaterialDesignExtensions/
MIT License
754 stars 122 forks source link

Stepper & TabControlStepper - In vertical layout Bindings don't work #118

Closed StefanoRivolta-Previero closed 3 years ago

StefanoRivolta-Previero commented 3 years ago

I modified the code in the Demo project, in StepperControl.xaml like this:

<!-- example for defining the Stepper in XAML -->     
     <mde:Stepper x:Name="stepper" IsLinear="{Binding Path=IsLinear}"
                   Layout="{Binding Path=Layout}" HorizontalAlignment="Stretch" 
                   VerticalAlignment="Stretch">
        <mde:Step>
          <mde:Step.Header>
            <mde:StepTitleHeaderControl FirstLevelTitle="header" />
          </mde:Step.Header>
          <mde:Step.Content>
            <StackPanel>
              <TextBlock Text="{Binding Path=Test}"/>
              <TextBlock Text="Normal Text without Binding"/>
              <TextBlock Text="{Binding Path=Test}"/>
            </StackPanel>
          </mde:Step.Content>
        </mde:Step>
      </mde:Stepper>

And in StepperBaseViewModel I've added a Test property as follows:

    protected string m_test = "This is a test";

    public string Test
    {
      get { return m_test; }
      set { m_test = value; OnPropertyChanged(nameof(Test)); }
    }

When the layout is set to horizontal, it works as expected. When the layout is set to vertical, it doesn't work anymore, like this:

MaterialDesignExtensionsDemo_DH36nR3JVk MaterialDesignExtensionsDemo_4I17QXHOaU

spiegelp commented 3 years ago

@StefanoRivolta-Previero The vertical layout uses an ItemsControl for the steps. That's why the DataContext in the vertical layout is set to the item. The horizontal layout uses a single ContentControl only and thus the DataContext will be as you expected.

This binding should work for both layouts: Text="{Binding Path=DataContext.Test, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type mde:Stepper}}}"