Question

我正在尝试使用Xamarin Form v2.3.2.127为一系列问题构建缩放按钮响应。我将它实现为ListView，并有许多按钮代表可能的缩放响应。

我们遇到的问题是iOS平台没有在ListView内的按钮上设置BackgroundColor属性，但代码可以在Android平台上运行。在XAML Xamarin Forms中，这里是按钮本身的定义（为简洁起见，我省略了ListView单元格定义）：

<ListView x:Name="Questions"
              AutomationId="ListViewQuestions"
              SeparatorVisibility="None"
              ItemsSource="{Binding Questions}"
              ListView.HasUnevenRows="True"
              BackgroundColor="Transparent" >
      <ListView.ItemTemplate>
        <DataTemplate>
          <ViewCell>
            <StackLayout Orientation="Vertical" VerticalOptions="FillAndExpand">
              <StackLayout Orientation="Horizontal">
                <Label Text="{Binding KeyAndQuestion}" />
              </StackLayout>
              <StackLayout Orientation="Horizontal"
                  HorizontalOptions="Center">
              <controls:ScaleButton
                    Text="0"
                    AutomationId="ButtonWeightedZero"
                    HeightRequest="37"
                    WidthRequest="37"
                    TextColor="White"
                    FontAttributes="Bold"
                    BorderRadius="5"
                    BackgroundColor="#919191"
                    Command="{Binding WeightedQuestionAnswered}"
                    CommandParameter="0">
                  <controls:ScaleButton.Triggers>
                    <DataTrigger  TargetType="controls:ScaleButton"
                                  Binding="{Binding SelectedWeight}"
                                  Value="{x:Null}">
                      <Setter Property="BackgroundColor"
                              Value="#919191"/>
                    </DataTrigger>
                    <DataTrigger  TargetType="controls:ScaleButton"
                                  Binding="{Binding SelectedWeight}"
                                  Value="0">
                      <Setter Property="BackgroundColor"
                              Value="#007AC3"/>
                    </DataTrigger>
                  </controls:ScaleButton.Triggers>
                </controls:ScaleButton>
.... // other scale buttons
               </StackLayout>
           </StackLayout>
          </ViewCell>
        </DataTemplate>
      </ListView.ItemTemplate>
    </ListView>

自定义ScaledButton定义也很简单。

public class ScaleButton : Button
{
}

在我遵循Xamarin Bugzilla路线之前，我想知道是否有人经历过此事。

更新

bound属性是一个整数，因此DataTrigger带有Binding，其中x：Nil似乎是罪魁祸首。因此，我最终重构了Scale按钮，如下所示。

<controls:ScaleButton
                Text="0"
                AutomationId="ButtonWeightedZero"
                Style="{StaticResource ScaleButton}"
                Command="{Binding WeightedQuestionAnswered}"
                CommandParameter="0">
              <controls:ScaleButton.Triggers>
                <DataTrigger  TargetType="controls:ScaleButton"
                              Binding="{Binding SelectedWeight}"
                              Value="0">
                  <Setter Property="Style"
                          Value="{StaticResource ScaleButtonSelected}"/>
                </DataTrigger>
              </controls:ScaleButton.Triggers>
</controls:ScaleButton>

其中样式的全局资源字典设置为此

<Style TargetType="{x:Type Button}" x:Key="ScaleButton" ApplyToDerivedTypes="True">
    <Setter Property="BackgroundColor" Value="#656665" />
    <Setter Property="FontAttributes" Value="Bold" />
    <Setter Property="HorizontalOptions" Value="Center" />
    <Setter Property="TextColor" Value="White" />
    <Setter Property="VerticalOptions" Value="Center" />
    <Setter Property="WidthRequest" Value="37" />
    <Setter Property="HeightRequest" Value="37" />
    <Setter Property="BorderRadius" Value="5" />
</Style>
<Style TargetType="{x:Type Button}" x:Key="ScaleButtonSelected" ApplyToDerivedTypes="True">
    <Setter Property="BackgroundColor" Value="#007AC3" />
    <Setter Property="FontAttributes" Value="Bold" />
    <Setter Property="HorizontalOptions" Value="Center" />
    <Setter Property="TextColor" Value="White" />
    <Setter Property="VerticalOptions" Value="Center" />
    <Setter Property="WidthRequest" Value="37" />
    <Setter Property="HeightRequest" Value="37" />
    <Setter Property="BorderRadius" Value="5" />
</Style>

这适用于两个平台，但有趣的是，尝试仅在 BackgroundColor 上使用Setter仅适用于Android平台。

Answer 1

这是我最终做的事情似乎工作得更好。我为Style转换器构建了一个自定义Weight值并绑定到Style属性。

public class ScaleToStyleConverter : IValueConverter
{
    static ScaleToStyleConverter Instance = new ScaleToStyleConverter();

    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        int paramValue;

        if (parameter == null)
            throw new ArgumentNullException("parameter");

        if (!(parameter is string))
            throw new ArgumentException("the parameter is not a string", "parameter");

        if (!int.TryParse((string)parameter, out paramValue))
        {
            throw new ArgumentException("The parameter cannot be converted to an integer.", "parameter");
        }

        return paramValue != (int)value ? 
            Application.Current.Resources["ScaleButton"] : 
            Application.Current.Resources["ScaleButtonSelected"];

    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

因此，ScaleButton的Xaml定义如下。

<controls:ScaleButton
                    Text="0"
                    AutomationId="ButtonWeightedZero"
                    Style="{Binding SelectedWeight, Converter= {x:Static converters:ScaleToStyleConverter.Instance }, ConverterParameter=0 }"
                    Command="{Binding WeightedQuestionAnswered}"
                    CommandParameter="0">
</controls:ScaleButton>

这看起来效果很好。

无法通过ListView

1 个答案: