动态删除边距和填充 WPF

Question

我目前正在 WPF 中创建一个包含表单的页面。有两个文本框和一个带有按钮的列表框，用于在列表框中添加一些元素。在一种模式（编辑模式）中，我希望所有内容都可见，以便用户能够编辑文本框并在列表框中添加元素。在另一种模式（查看模式）中，我绑定了 Visibility 属性，以便在此模式下，除了列表框之外的所有内容都会出现（并且列表框占据整个位置），以便用户可以看到列表框中的现有元素。

现在我的问题是，在编辑模式下，我给了 Margin="10" 边距，但在查看模式下，我希望列表框占据整个页面的宽度/高度（所以我想删除该边距）。我该怎么做呢？

我的 XAML（一些用户控件被封装在我正在使用的框架中，但它不应该影响我的问题）：

<Grid x:Name="MainScope" pres:OneTheme.Theme="Content">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
        <RowDefinition Height="53*" />
    </Grid.RowDefinitions>
    <pres:OneContentLayout Mode="List" Grid.Row="3"  Margin="10" >
    <pres:OneListBox x:Name="ListBox" BorderBrush="{DynamicResource Presentation_ControlBorderBrush}" BorderThickness="1"
                     ItemsSource="{Binding InterfaceSpecification.IOPoints}"
                     DeleteItemRequestCommand="{Binding DeleteIOPointCommand}" IsEdited="{Binding IsEditable}" >
            <pres:OneListBox.ItemTemplate>
                <DataTemplate>
                            <Grid Margin="5">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="1*" />
                                <ColumnDefinition Width="1*" />
                                <ColumnDefinition Width="Auto"/>
                        </Grid.ColumnDefinitions>

                            <vw:IOPointDefinitionView Grid.Column="0" />
                            <vw:IOPointOtherConnectedElementView Grid.Column="1" Margin="20,0"/>

                            <pres:OneIcon Grid.Column="2" IconBrush="{DynamicResource Icon_DraggableHandleHorizontal}" Margin="8,0" HorizontalAlignment="Right" Visibility="{Binding ElementName=ListBox, Path=IsEdited, Converter={StaticResource OneBooleanToVisibilityConverter}}" />

                            </Grid>
                    </DataTemplate>
            </pres:OneListBox.ItemTemplate>
    </pres:OneListBox>
    </pres:OneContentLayout>
    <pres:OneTextBox Watermark="Name..." Text="{Binding InterfaceSpecification.Name}" Margin="85,12,0,0"
                     AcceptsReturn="False" MaxLines="1" Height="22" VerticalAlignment="Top"
                     HorizontalAlignment="Left" Width="300" Visibility="{Binding IsEditable, Converter={StaticResource OneBooleanToVisibilityConverter}}" />
    <pres:OneTextBox Margin="85,3.999,10,3" Text="{Binding InterfaceSpecification.Description}"
                     Watermark="Description..." Height="66" Grid.Row="1" Visibility="{Binding IsEditable, Converter={StaticResource OneBooleanToVisibilityConverter}}"/>

    <pres:OneToggleButton x:Name="Add_Button" Content="Add IO Point" HorizontalAlignment="Right"
                          VerticalAlignment="Bottom" Margin="0,0,10,0" Grid.Row="2" Width="115" Height="18"
                          IsChecked="{Binding ElementName=Add_Popover, Path=IsOpen}"
                          pres:OneTheme.PresentationMode="Inline" Visibility="{Binding IsEditable, Converter={StaticResource OneBooleanToVisibilityConverter}}" />
...

Answer 1

所以你基本上希望pres:OneContentLayout 在IsEditable 为假时的边距为0，而在为真时为10，对吧？

您可以在Style 中使用Trigger 来实现这样的工作：

<pres:OneContentLayout.Style>
    <Style TargetType="{x:Type pres:OneContentLayout}">

        <!-- Default margin is 0 -->
        <Setter Property="Margin" Value="0" />

        <Style.Triggers>
            <!-- When in edit-mode make margin 10 -->
            <DataTrigger Binding="{Binding IsEditable}" Value="True">
                <Setter Property="Margin" Value="10" />
            </DataTrigger>
        </Style.Triggers>
    </Style>
</pres:OneContentLayout.Style>