动态删除边距和填充WPF

Question

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

现在我的问题是，在编辑模式下，我给了一个边距="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

所以当IsEditable为假时，您基本上希望pres:OneContentLayout的裕度为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>