如何使用BasedOn进行材料设计？

Question

我在我的XAML中有这个代码

<Button Click="BtnSync_Click" Grid.Column="0" Style="{StaticResource MaterialDesignFloatingActionLightButton}" Margin="8,21,10,75" Command="{Binding SaveCommand}" materialDesign:ButtonProgressAssist.IsIndicatorVisible="{Binding IsSaving}"
                            materialDesign:ButtonProgressAssist.Value="{Binding SaveProgress}" Background="Transparent" Height="Auto" Width="Auto" BorderBrush="{x:Null}">

      <materialDesign:PackIcon  Height="24" Width="24" Foreground="LightBlue">
             <materialDesign:PackIcon.Style>
                <Style TargetType="materialDesign:PackIcon" BasedOn="{StaticResource {x:Type materialDesign:PackIcon}}" >
                  <Setter  Property="Kind" Value="CloudSync" />
                     <Style.Triggers>
                        <DataTrigger Binding="{Binding IsSaveComplete}" Value="True">
                             <Setter Property="Kind" Value="Check" />
                                <DataTrigger.EnterActions>
                                     <BeginStoryboard>
                                          <Storyboard>
                                             <DoubleAnimation Storyboard.TargetProperty="Opacity" From="0" To="1" Duration="0:0:0.8" />
                                            </Storyboard>
                                         </BeginStoryboard>
                                     </DataTrigger.EnterActions>
                            </DataTrigger>
                         </Style.Triggers>
                 </Style>
          </materialDesign:PackIcon.Style>
     </materialDesign:PackIcon>
 </Button>

但是我在这一行得到了错误

BasedOn="{StaticResource {x:Type materialDesign:PackIcon}}"

上面写着类似{x:Type materialDesign:PackIcon Extension} could not be resolved的东西

我该怎么做？我一直在互联网上寻找解决方案，但似乎我还没有得到解决方案。

Answer 1

情节提要与基控件无关。

这是不带基控件的代码：

<ToggleButton Name="IsSaveComplete"
                      Margin="0, 32"/>

<Button Style="{StaticResource MaterialDesignFloatingActionLightButton}" 
        Margin="8,21,10,75" 
        Command="{Binding SaveCommand}" 
        materialDesign:ButtonProgressAssist.IsIndicatorVisible="{Binding IsSaving}"
        materialDesign:ButtonProgressAssist.Value="{Binding SaveProgress}" 
        Background="Transparent" 
        Height="Auto" 
        Width="Auto" 
        BorderBrush="{x:Null}"
        Click="BtnSync_OnClick">

    <materialDesign:PackIcon  Height="24"
                              Width="24"
                              Foreground="LightBlue">
        <materialDesign:PackIcon.Style>
            <Style TargetType="materialDesign:PackIcon" >
                <Setter Property="Kind" Value="CloudSync" />
                <Style.Triggers>
                    <DataTrigger Binding="{Binding ElementName=IsSaveComplete, Path=IsChecked}"
                                 Value="True">
                        <Setter Property="Kind"
                                Value="Check" />
                        <DataTrigger.EnterActions>
                            <BeginStoryboard>
                                <Storyboard>
                                    <DoubleAnimation Storyboard.TargetProperty="Opacity" From="0" To="1" Duration="0:0:0.8" />
                                </Storyboard>
                            </BeginStoryboard>
                        </DataTrigger.EnterActions>
                    </DataTrigger>
                </Style.Triggers>
            </Style>
        </materialDesign:PackIcon.Style>
    </materialDesign:PackIcon>
</Button>

输出：

​

​