xamarin.forms - Idiom 上的设备差异 Xaml 设置

Question

我需要使用 OnIdiom，我正在为按钮设置宽度和高度，但是如果我在平板电脑和手机上显示按钮，它是相同的。你能告诉我我做错了什么吗？

<Button  
        x:Name="ScanButton"  Padding="0"
        VerticalOptions="End" HorizontalOptions="CenterAndExpand">
        <Button.Style>
            <OnIdiom x:TypeArguments="Style" Tablet="{StaticResource PrimaryButtonStyleTablet}" Phone="{StaticResource PrimaryButtonStylePhone}"></OnIdiom>
        </Button.Style>
      </Button>     

<Style x:Key="PrimaryButtonStylePhone" TargetType="Button">
                <Setter Property="BackgroundColor" Value="{DynamicResource ButtonColor}" />
                <Setter Property="TextColor" Value="{DynamicResource PrimaryTintColor}" />
                <Setter Property="FontSize" Value="20" />
                <Setter Property="CornerRadius" Value="25"/>
                  <Setter Property="WidthRequest" Value="200"/>
                <Setter Property="HeightRequest" Value="33"/>
            </Style>
            <Style x:Key="PrimaryButtonStyleTablet" TargetType="Button">
                <Setter Property="BackgroundColor" Value="{DynamicResource ButtonColor}" />
                <Setter Property="TextColor" Value="{DynamicResource PrimaryTintColor}" />
                <Setter Property="FontSize" Value="20" />
                <Setter Property="CornerRadius" Value="25"/>
              <Setter Property="WidthRequest" Value="390"/>
                <Setter Property="HeightRequest" Value="33"/>
            </Style>

标签： xamarin.forms

Answer 1

您需要使用Setter.ValueOnIdiom内部。

例如，修改代码Style如下：

<Style x:Key="PrimaryButtonStyle"
        TargetType="Button">
    <Setter Property="BackgroundColor">
        <Setter.Value>
            <OnIdiom Phone="{DynamicResource phoneDynamicResource}"
                        Tablet="{DynamicResource tableDynamicResource}"/>
        </Setter.Value>
    </Setter>
    <Setter Property="TextColor">
        <Setter.Value>
            <OnIdiom Phone="Blue" Tablet="Green"/>
        </Setter.Value>
    </Setter>
    <Setter Property="FontSize">
        <Setter.Value>
            <OnIdiom Phone="20" Tablet="20"/>
        </Setter.Value>
    </Setter>
    <Setter Property="CornerRadius">
        <Setter.Value>
            <OnIdiom Phone="25" Tablet="25" />
        </Setter.Value>
    </Setter>
    <Setter Property="WidthRequest">
        <Setter.Value>
            <OnIdiom Phone="200" Tablet="390" />
        </Setter.Value>
    </Setter>
    <Setter Property="HeightRequest">
        <Setter.Value>
            <OnIdiom  Phone="33" Tablet="33" />
        </Setter.Value>
    </Setter>
</Style>

并用于Button：

<Button x:Name="ScanButton"
        Padding="0"
        VerticalOptions="End"
        Text="Button"
        Style="{StaticResource PrimaryButtonStyle}"
        HorizontalOptions="CenterAndExpand">
</Button>