如何修复宽度触发

Question

我正在设置触发器，这些触发器会更改我的on控件：materialDesign 是的，出现了进度条，但是宽度剂量改变了

这是用于简单的媒体播放器，单击以启动记录

<Window.Resources>
        <Style x:Key="ChangeWidthWhenRecord" TargetType="materialDesign:ColorZone">
            <Style.Triggers>
                <DataTrigger Binding="{Binding ElementName=ToggleButton_Record, Path=IsChecked}" Value="True">
                    <Setter Property="Width" Value="350" />
                </DataTrigger>
                <DataTrigger Binding="{Binding ElementName=ToggleButton_Record, Path=IsChecked}" Value="False">
                    <Setter Property="Width" Value="250" />
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </Window.Resources>

 <materialDesign:ColorZone
                x:Name="MediaPanelColorZone"
                Grid.Row="2"
                Width="250"
                Height="30"
                VerticalAlignment="Center"
                materialDesign:ShadowAssist.Darken="True"
                materialDesign:ShadowAssist.ShadowDepth="Depth3"
                materialDesign:ShadowAssist.ShadowEdges="Bottom"
                CornerRadius="15"
                Mode="PrimaryDark"
                Style="{StaticResource ChangeWidthWhenRecord}">
bla bla bla shitcode
 <ToggleButton
              Name="ToggleButton_Record"
              IsChecked="False"
              Style="{StaticResource MaterialDesignActionToggleButton}"
              ToolTip="Записать">
                        <materialDesign:PackIcon
                            HorizontalAlignment="Center"
                            VerticalAlignment="Center"
                            Foreground="OrangeRed"
                            Kind="Record" />
  </ToggleButton>
  <ProgressBar
              Grid.Row="2"
              Width="100"
              Visibility="{Binding ElementName=ToggleButton_Record, Path=IsChecked, Converter={StaticResource BooleanToVisibilityConverter}}" />
bla bla bla 
 </materialDesign:ColorZone>

这里img会发生什么：https://imgur.com/a/cmAzY8W 我希望它会随着进度条元素而扩展