是否有使用 Datatrigger 设置帧边距的解决方案？

Question

我尝试使用 Binding 设置框架的边距。如果可绑定值为真，则保证金必须结算为“10,0”，否则必须结算为“10”。

在我看来，DataTrigger 是实现这一目标的最佳方式。我做了一个 DataTrigger 来设置我的框架的一些属性，比如 CornerRadius 和 Margin。

至此，cornerRadius 设置为我想要的但不是 Margin。因此找到了 Bindable 属性。

我尝试直接在 Frame 标签中设置 Margin，它起作用了，但它不依赖于 Bindable 属性。

有人有解决办法吗？

<DataTemplate x:Key="tache-template">
                <ViewCell>
                    <!--#region stl tâche-->
                    <StackLayout 
                        Orientation="Vertical" 
                        HorizontalOptions="FillAndExpand"
                        VerticalOptions="Fill"
                        Margin="0"
                        Padding="0"
                        Spacing="0">
                        <Grid>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto" />
                            </Grid.RowDefinitions>

                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*" />
                            </Grid.ColumnDefinitions>

                            <Frame CornerRadius="10" HasShadow="False" IsClippedToBounds="True" Padding="0" Margin="10">
                                <Frame.Triggers>
                                    <DataTrigger TargetType="Frame" Binding="{Binding IsAssociated}" Value="True">
                                        <Setter Property="Margin" Value="10,0"/>
                                        <Setter Property="CornerRadius" Value="0"/>
                                    </DataTrigger>
                                </Frame.Triggers>
                                <StackLayout 
                                x:Name="tacheLandscape"
                                BackgroundColor="{StaticResource LightGrayCorim}"
                                Orientation="Horizontal" 
                                Spacing="2">
                                    <controls:CustomTappedStackLayout 
                                    x:Name="imageTask"
                                    Orientation="Vertical"
                                    VerticalOptions="Fill"
                                    HorizontalOptions="Fill"
                                    Padding="5"
                                    Spacing="0"
                                    Margin="0" 
                                    BackgroundColor="White" 
                                    TappedBackgroundColor="#cbe6f1"
                                    MinimumWidthRequest="50" 
                                    WidthRequest="50"
                                    effects:LongPressedEffect.Command="{Binding BindingContext.OnSelectionModeCommand, Source={x:Reference page}}" 
                                    effects:LongPressedEffect.CommandParameter="{Binding .}">
                                        <StackLayout.Effects>
                                            <effects:LongPressedEffect/>
                                        </StackLayout.Effects>
                                        <StackLayout 
                                        HorizontalOptions="FillAndExpand"
                                        BackgroundColor="Transparent"
                                        VerticalOptions="CenterAndExpand">
                                            <Image 
                                            IsVisible="{Binding BindingContext.SelectionTacheMode, Source={x:Reference page}, Converter={StaticResource NegateBooleanConverter}}"
                                            WidthRequest="30"
                                            VerticalOptions="Center"
                                            HorizontalOptions="Center"
                                            Source="TacheBleu.png">
                                            </Image>
                                            <CheckBox
                                            IsChecked="{Binding IsSelected, Mode=TwoWay}"
                                            IsEnabled="{Binding Model.ReadOnly, Converter={StaticResource NegateBooleanConverter}}"
                                            ClassId="{Binding Model.Tache.Id}"
                                            Color="{StaticResource BlueCorim}"
                                            VerticalOptions="Center"
                                            HorizontalOptions="Center"
                                            IsVisible="{Binding BindingContext.SelectionTacheMode, Source={x:Reference page}}">
                                                <CheckBox.Triggers>
                                                    <DataTrigger TargetType="CheckBox" Binding="{Binding Model.ReadOnly}" Value="True">
                                                        <Setter Property="Color" Value="Gray"/>
                                                        <Setter Property="Opacity" Value="0.6"/>
                                                    </DataTrigger>
                                                </CheckBox.Triggers>
                                            </CheckBox>
                                        </StackLayout>
                                    </controls:CustomTappedStackLayout>
                                    <controls:CustomTappedStackLayout
                                    BackgroundColor="White"
                                    TappedBackgroundColor="#cbe6f1"
                                    Orientation="Vertical"
                                    HorizontalOptions="FillAndExpand"
                                    VerticalOptions="FillAndExpand"
                                    Padding="10"
                                    ClassId="{Binding Model.Tache.Id,StringFormat='tache_{0}'}">
                                        <StackLayout.GestureRecognizers>
                                            <TapGestureRecognizer Tapped="onOpenItem"/>
                                        </StackLayout.GestureRecognizers>
                                        <StackLayout.Triggers>
                                            <DataTrigger TargetType="StackLayout" Binding="{Binding LandscapeMode}" Value="True">
                                                <Setter Property="Orientation" Value="Horizontal"/>
                                            </DataTrigger>
                                        </StackLayout.Triggers>

                                        <StackLayout
                                        Orientation="Horizontal"
                                        HorizontalOptions="FillAndExpand">
                                            <StackLayout
                                            Orientation="Vertical"
                                            HorizontalOptions="FillAndExpand">
                                                <StackLayout
                                                Spacing="5"
                                                Orientation="Horizontal" 
                                                HorizontalOptions="FillAndExpand">
                                                    <Grid ColumnSpacing="5" HorizontalOptions="FillAndExpand" VerticalOptions="StartAndExpand">
                                                        <Grid.ColumnDefinitions>
                                                            <ColumnDefinition Width="Auto"/>
                                                            <ColumnDefinition Width="*"/>
                                                        </Grid.ColumnDefinitions>

                                                        <Grid.RowDefinitions>
                                                            <RowDefinition Height="50"/>
                                                        </Grid.RowDefinitions>

                                                        <Label 
                                                        Grid.Column="0" Grid.Row="0"
                                                        Text="{trad:Translate tache,Converter={StaticResource ToUpperConverter}}"
                                                        TextColor="LightGray"
                                                        FontFamily="{StaticResource RegularFont}"/>
                                                        <Label
                                                        Grid.Column="1" Grid.Row="0"
                                                        Text="{Binding Model.Tache.Libelle, Converter={StaticResource ToUpperConverter}}"
                                                        FontAttributes="Bold"
                                                        LineBreakMode="WordWrap"
                                                        MaxLines="2"
                                                        HorizontalOptions="FillAndExpand"
                                                        VerticalOptions="Fill"
                                                        FontFamily="{StaticResource SemiBoldFont}"
                                                        FontSize="{x:StaticResource MediumTextSize}"
                                                        TextColor="Black"/>
                                                    </Grid>

                                                </StackLayout>

                                                <!--#region type de la tâche-->
                                                <Grid ColumnSpacing="5"  HorizontalOptions="FillAndExpand">
                                                    <Grid.ColumnDefinitions>
                                                        <ColumnDefinition Width="Auto"/>
                                                        <ColumnDefinition Width="*"/>
                                                    </Grid.ColumnDefinitions>
                                                    <Grid.RowDefinitions>
                                                        <RowDefinition Height="*"/>
                                                    </Grid.RowDefinitions>

                                                    <Label
                                                    Text="{trad:Translate type, Converter={StaticResource ToUpperConverter}}"
                                                    FontAttributes="Bold"
                                                    TextColor="LightGray"
                                                    FontFamily="{StaticResource SemiBoldFont}"
                                                    FontSize="{x:StaticResource MediumTextSize}"
                                                    HorizontalOptions="Fill"
                                                    VerticalOptions="Center"
                                                    Grid.Row="0" Grid.Column="0"/>
                                                    <Label
                                                    Text="{trad:Translate aucun_type,Converter={StaticResource UpperFirstCharConverter}}"
                                                    TextColor="LightGray"
                                                    FontFamily="{StaticResource RegularFontItalic}"
                                                    FontSize="{StaticResource DefaultTextSize}"
                                                    HorizontalOptions="Fill"
                                                    VerticalOptions="Fill"
                                                    Grid.Row="0" Grid.Column="1">
                                                        <Label.Triggers>
                                                            <DataTrigger TargetType="Label" Binding="{Binding Model.Tache.TypeTache.Libelle,Converter={StaticResource StringEmptyBooleanConverter}}" Value="True">
                                                                <Setter Property="Text" Value="{Binding Model.Tache.TypeTache.Libelle}"/>
                                                                <Setter Property="FontFamily" Value="{StaticResource RegularFont}"/>
                                                                <Setter Property="TextColor" Value="Black"/>
                                                            </DataTrigger>
                                                        </Label.Triggers>
                                                    </Label>
                                                </Grid>
                                                <!--#endregion type de la tâche-->
                                                <!--#region note de la tâche-->
                                                <Grid ColumnSpacing="5" HorizontalOptions="FillAndExpand">
                                                    <Grid.ColumnDefinitions>
                                                        <ColumnDefinition Width="Auto"/>
                                                        <ColumnDefinition Width="*"/>
                                                    </Grid.ColumnDefinitions>
                                                    <Grid.RowDefinitions>
                                                        <RowDefinition Height="*"/>
                                                    </Grid.RowDefinitions>
                                                    <Label
                                                    Text="{trad:Translate note, Converter={StaticResource ToUpperConverter}}"
                                                    FontAttributes="Bold"
                                                    FontFamily="{StaticResource SemiBoldFont}"
                                                    FontSize="{x:StaticResource MediumTextSize}"
                                                    VerticalOptions="Start"
                                                    HorizontalOptions="Fill"
                                                    TextColor="LightGray"
                                                    Grid.Row="0" Grid.Column="0"/>
                                                    <Label 
                                                    Text="{trad:Translate aucune_note,Converter={StaticResource UpperFirstCharConverter}}"
                                                    LineBreakMode="TailTruncation"
                                                    MaxLines="2"
                                                    HorizontalOptions="Fill"
                                                    VerticalOptions="FillAndExpand"
                                                    TextColor="LightGray"
                                                    FontFamily="{StaticResource RegularFontItalic}"
                                                    FontSize="{StaticResource DefaultTextSize}"
                                                    Grid.Row="0" Grid.Column="1">
                                                        <Label.Triggers>
                                                            <DataTrigger TargetType="Label" Binding="{Binding Model.Tache.Note, Converter={StaticResource StringEmptyBooleanConverter}}" Value="True">
                                                                <Setter Property="Text" Value="{Binding Model.Tache.Note}"/>
                                                                <Setter Property="FontSize" Value="{StaticResource DefaultTextSize}"/>
                                                                <Setter Property="FontFamily" Value="{StaticResource RegularFont}"/>
                                                                <Setter Property="TextColor" Value="Black"/>
                                                            </DataTrigger>
                                                        </Label.Triggers>
                                                    </Label>
                                                </Grid>
                                                <!--#endregion note de la tâche-->
                                            </StackLayout>
                                        </StackLayout>
                                        <Button 
                                        Clicked="OnShowTaskPicker" 
                                        IsEnabled="{Binding Model.ReadOnly, Converter={StaticResource NegateBooleanConverter}}"
                                        Text="{Binding StatutTache.Title}"
                                        BackgroundColor="{Binding BackgroundColorTache}"
                                        TextColor="{Binding ForegroundColorTache}"
                                        HorizontalOptions="FillAndExpand"
                                        CommandParameter="{Binding .}"
                                        CornerRadius="10"
                                        HeightRequest="50">
                                            <Button.Triggers>
                                                <DataTrigger TargetType="Button" Binding="{Binding Model.ReadOnly}" Value="True">
                                                    <Setter Property="Opacity" Value="0.6"/>
                                                </DataTrigger>
                                            </Button.Triggers>
                                        </Button>
                                        <BoxView HeightRequest="2" BackgroundColor="{StaticResource LightGrayCorim}" HorizontalOptions="FillAndExpand" IsVisible="{Binding IsAssociated}"/>
                                    </controls:CustomTappedStackLayout>
                                </StackLayout>
                            </Frame>
                        </Grid>
                    </StackLayout>
                </ViewCell>

Answer 1

我创建了一个演示，它在我这边运行良好。

in xaml

我添加了两个 Frames 和一个 Button 。当您单击该按钮时，IsAssociated 的值将被更改。

<StackLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
        <!-- Place new controls here -->
  <Frame CornerRadius="10" BackgroundColor="Blue" HasShadow="False" HeightRequest="200" IsClippedToBounds="True" Padding="0" Margin="10">
     <Frame.Triggers>
        <DataTrigger TargetType="Frame" Binding="{Binding IsAssociated}" Value="True">
            <Setter Property="Margin" Value="10,0"/>
            <Setter Property="CornerRadius" Value="0"/>
        </DataTrigger>
     </Frame.Triggers>
  </Frame>

  <Frame CornerRadius="10" BackgroundColor="Red" HasShadow="False" HeightRequest="200" IsClippedToBounds="True" Padding="0" Margin="10">
     <Frame.Triggers>
       <DataTrigger TargetType="Frame" Binding="{Binding IsAssociated}" Value="True">
            <Setter Property="Margin" Value="10,0"/>
            <Setter Property="CornerRadius" Value="0"/>
       </DataTrigger>
     </Frame.Triggers>
  </Frame>

  <Button Text="Click Me" Clicked="Button_Clicked"/>

</StackLayout>

in code behind

public partial class MainPage : ContentPage,INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;


    bool isAssociated;
    public bool IsAssociated
    {
        get { return isAssociated; }

        set
        {
            isAssociated = value;
            NotifyPropertyChanged();               
        }
    }
  
    protected virtual void NotifyPropertyChanged([CallerMemberName] string propertyName = "")
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }


    public MainPage()
    {
        InitializeComponent();

        BindingContext = this;

        IsAssociated = false;
    }

    private void Button_Clicked(object sender, EventArgs e)
    {
        IsAssociated = !IsAssociated;
    }
}

我在后面的代码中做的只是为了测试。您可以在您的视图模型中实现它。

更新

如果直接将 ViewCell 设置为 Frame，可能会导致一些问题。因为它不适合其子元素的大小。

改进 Datatemplate

的布局

<DataTemplate>
  <ViewCell>
    <Grid>
       <Grid.RowDefinitions>
         <RowDefinition Height="Auto" />
       </Grid.RowDefinitions>

       <Grid.ColumnDefinitions>
             <ColumnDefinition Width="*" />
       </Grid.ColumnDefinitions>

       <Frame Grid.Row="0" BackgroundColor="Red" Grid.Column="0" HeightRequest="200" CornerRadius="10" HasShadow="False" IsClippedToBounds="True" Padding="0" Margin="10">
         <Frame.Triggers>
          <DataTrigger TargetType="Frame" Binding="{Binding IsAssociated}" Value="True">
           <Setter Property="Margin" Value="10,0"/>
           <Setter Property="CornerRadius" Value="0"/>
          </DataTrigger>
        </Frame.Triggers>
      </Frame>
    </Grid>
  </ViewCell>
</DataTemplate>

是否有使用 Datatrigger 设置帧边距的解决方案？

Is there a solution to set Margin of Frame with Datatrigger?

xaml

datatrigger

datatemplate

xamarin.forms

更新