0

我正在尝试使用 Style 创建一个带有线性渐变的 Frame。如果我对样式中的颜色进行硬编码，则框架会正确显示。如果我尝试将颜色绑定到自定义应用程序设置对象中的属性，则样式不起作用。下面是一个例子：

这是静态样式。我将其配置为使用来自对象的相同颜色，以确保值没有任何问题。

        <Style x:Key="wlHeaderGradient" TargetType="Frame">
            <Setter Property="BorderColor" Value="Purple" />
            <Setter Property="HasShadow" Value="False" />
            <Setter Property="CornerRadius" Value="0" />
            <Setter Property="HeightRequest" Value="100" />
            <Setter Property="WidthRequest" Value="100"/>
            <Setter Property="HorizontalOptions" Value="Center" />
            <Setter Property="VerticalOptions" Value="Center" />
            <Setter Property="Background">
                <LinearGradientBrush EndPoint="0,1">
                    <GradientStop Color="#FF008080" Offset="0.0" />
                    <GradientStop Color="#FFFF6347" Offset="0.5" />
                    <GradientStop Color="#FF008080" Offset="1.0" />
                </LinearGradientBrush>
            </Setter>
        </Style>

这是动态样式

        <Style x:Key="wlHeaderGradient1" TargetType="Frame">
            <Setter Property="BorderColor" Value="Purple" />
            <Setter Property="HasShadow" Value="False" />
            <Setter Property="CornerRadius" Value="0" />
            <Setter Property="HeightRequest" Value="100" />
            <Setter Property="WidthRequest" Value="100"/>
            <Setter Property="HorizontalOptions" Value="Center" />
            <Setter Property="VerticalOptions" Value="Center" />
            <Setter Property="Background">
                <LinearGradientBrush EndPoint="0,1">
                    <GradientStop Color="{Binding HostPublicStyleInfo.CheckInHeaderBgColor1.ColorHex}" Offset="0.0" />
                    <GradientStop Color="{Binding HostPublicStyleInfo.CheckInHeaderBgColor2.ColorHex}" Offset="0.5" />
                    <GradientStop Color="{Binding HostPublicStyleInfo.CheckInHeaderBgColor1.ColorHex}" Offset="1.0" />
                </LinearGradientBrush>
            </Setter>
        </Style>

这是我用来测试的 StackLayout：

        <StackLayout Orientation="Vertical" HorizontalOptions="Center" VerticalOptions="Start">
            <StackLayout Orientation="Horizontal" HorizontalOptions="Center" VerticalOptions="Start">
                <Frame x:Name="frmTest" Style="{StaticResource wlHeaderGradient}">
                </Frame>

                <Frame x:Name="frmTest1" Style="{StaticResource wlHeaderGradient1}">
                </Frame>
            </StackLayout>

            <Label x:Name="lblBGColor1" HorizontalOptions="Center" VerticalOptions="Center"/>
            <Label x:Name="lblBGColor2" HorizontalOptions="Center" VerticalOptions="Center"/>
            <Label x:Name="lblSampleWithStyle" Style="{StaticResource wlPublicHeader1}" Text="This is a working style with binding to same object." />
        </StackLayout>

这是 CodeBehind 页面中的代码，我显示 CheckInHeaderBgColor1 和 CheckInHeaderBgColor2 值。我在 OnAppearing 事件结束时运行此代码：

lblBGColor1.Text = App.gvm_AppSettings.HostPublicStyleInfo.CheckInHeaderBgColor1.ColorHex;
lblBGColor2.Text = App.gvm_AppSettings.HostPublicStyleInfo.CheckInHeaderBgColor2.ColorHex;

这是我得到的输出：

在此处输入图像描述

我将整个页面绑定到 CodeBehind 中的应用设置，如下所示：

this.BindingContext = App.gvm_AppSettings;

注意：我在页面上的其他样式中使用此 AppSettings 对象的其他属性（如下所示），它们似乎可以工作。在屏幕截图中，您可以看到最后一个标签的文本颜色与其下方屏幕的背景颜色相匹配。

这是样式：

       <Style x:Key="wlPublicHeader1" TargetType="Label" >
            <Setter Property="BackgroundColor" Value="Transparent" />
            <Setter Property="Padding" Value="8,4,8,4" />
            <Setter Property="HorizontalOptions" Value="Center" />
            <Setter Property="VerticalOptions" Value="Center" />
            <Setter Property="TextColor" Value="{Binding HostPublicStyleInfo.CheckInFormBgColor1.ColorHex}" />
            <Setter Property="FontSize" Value="Small" />
            <Setter Property="FontAttributes" Value="Bold" />
        </Style>

如果有人知道我做错了什么，我将非常感谢您的反馈。

更新：：

根据以下反馈 - 我创建了返回 Xamarin.Forms.Color 对象并尝试绑定到该属性的自定义颜色对象的属性。那没起效。我还尝试在 App.Xaml 文件中使用动态属性，在加载自定义颜色对象时修改这些属性的值，但这也不起作用。以下是更新的示例：

App.Xaml 颜色

<Application.Resources>
    <ResourceDictionary>
        <Color x:Key="grdHeaderBGColor1">White</Color>
        <Color x:Key="grdHeaderBGColor2">Black</Color>

以下是三种更新的测试样式：

       <Style x:Key="wlHeaderGradient" TargetType="Frame">
            <Setter Property="BorderColor" Value="Purple" />
            <Setter Property="HasShadow" Value="False" />
            <Setter Property="CornerRadius" Value="0" />
            <Setter Property="HeightRequest" Value="100" />
            <Setter Property="WidthRequest" Value="100"/>
            <Setter Property="HorizontalOptions" Value="Center" />
            <Setter Property="VerticalOptions" Value="Center" />
            <Setter Property="Background">
                <LinearGradientBrush EndPoint="0,1">
                    <GradientStop Color="#FF008080" Offset="0.0" />
                    <GradientStop Color="#FFFF6347" Offset="0.5" />
                    <GradientStop Color="#FF008080" Offset="1.0" />
                </LinearGradientBrush>
            </Setter>
        </Style>

        <Style x:Key="wlHeaderGradient1" TargetType="Frame">
            <Setter Property="BorderColor" Value="Purple" />
            <Setter Property="HasShadow" Value="False" />
            <Setter Property="CornerRadius" Value="0" />
            <Setter Property="HeightRequest" Value="100" />
            <Setter Property="WidthRequest" Value="100"/>
            <Setter Property="HorizontalOptions" Value="Center" />
            <Setter Property="VerticalOptions" Value="Center" />
            <Setter Property="Background">
                <LinearGradientBrush EndPoint="0,1">
                    <GradientStop Color="{Binding HostPublicStyleInfo.CheckInHeaderBgColor1.DisplayColor}" Offset="0.0" />
                    <GradientStop Color="{Binding HostPublicStyleInfo.CheckInHeaderBgColor2.DisplayColor}" Offset="0.5" />
                    <GradientStop Color="{Binding HostPublicStyleInfo.CheckInHeaderBgColor1.DisplayColor}" Offset="1.0" />
                </LinearGradientBrush>
            </Setter>
        </Style>

        <Style x:Key="wlHeaderGradient2" TargetType="Frame">
            <Setter Property="BorderColor" Value="Purple" />
            <Setter Property="HasShadow" Value="False" />
            <Setter Property="CornerRadius" Value="0" />
            <Setter Property="HeightRequest" Value="100" />
            <Setter Property="WidthRequest" Value="100"/>
            <Setter Property="HorizontalOptions" Value="Center" />
            <Setter Property="VerticalOptions" Value="Center" />
        </Style>

这里是生成示例框架的 XAML，示例 2 使用动态资源。

        <StackLayout Orientation="Vertical" HorizontalOptions="Center" VerticalOptions="Start">
            <StackLayout Orientation="Horizontal" HorizontalOptions="Center" VerticalOptions="Start">
                <Frame x:Name="frmTest" Style="{StaticResource wlHeaderGradient}">
                </Frame>

                <Frame x:Name="frmTest1" Style="{StaticResource wlHeaderGradient1}">
                </Frame>

                <Frame x:Name="frmTest2" Style="{StaticResource wlHeaderGradient2}">
                    <Frame.Background>
                        <LinearGradientBrush EndPoint="0,1">
                            <GradientStop Color="{DynamicResource grdHeaderBGColor1}" Offset="0.0" />
                            <GradientStop Color="{DynamicResource  grdHeaderBGColor2}" Offset="0.5" />
                            <GradientStop Color="{DynamicResource grdHeaderBGColor1}" Offset="1.0" />
                        </LinearGradientBrush>
                    </Frame.Background>
                </Frame>

            </StackLayout>

            <Label x:Name="lblBGColor1" HorizontalOptions="Center" VerticalOptions="Center"/>
            <Label x:Name="lblBGColor2" HorizontalOptions="Center" VerticalOptions="Center"/>
            <Label x:Name="lblSampleWithStyle" Style="{StaticResource wlPublicHeader1}" Text="This is a working style with binding to same object." />
        </StackLayout>

结果如下：

结果屏幕显示

第二个示例 - 绑定到 Xamarin.Forms.Color 对象根本不起作用。第三个示例，尝试使用动态资源永远不会更新为新颜色（它们保持静态的黑白值），即使我已确保在加载自定义颜色对象时更改了值。

所以我又在这里不知所措。

4

2 回答 2

0

根据我的经验，当您尝试将颜色绑定到这样的字符串十六进制值时，我发现颜色绑定不正确。您可以将这些字符串字段的类型更改为颜色对象并尝试。

您的 CheckInHeaderBgColor1 和 CheckInHeaderBgColor2 属性是 Color 类型吗？如果是，请尝试直接绑定它们

动态颜色也可以。像这样：

       <Style x:Key="wlHeaderGradient" TargetType="Frame">
            <Setter Property="BorderColor" Value="Purple" />
            <Setter Property="HasShadow" Value="False" />
            <Setter Property="CornerRadius" Value="0" />
            <Setter Property="HeightRequest" Value="100" />
            <Setter Property="WidthRequest" Value="100"/>
            <Setter Property="HorizontalOptions" Value="Center" />
            <Setter Property="VerticalOptions" Value="Center" />
            <Setter Property="Background">
                <LinearGradientBrush EndPoint="0,1">
                    <GradientStop Color="{DyanmicResource Color1}" Offset="0.0" />
                    <GradientStop Color="{DyanmicResource Color2}" Offset="0.5" />
                    <GradientStop Color="{DyanmicResource Color3}" Offset="1.0" />
                </LinearGradientBrush>
            </Setter>
        </Style>
于 2021-09-01T15:50:33.750 回答
0

第二个示例 - 绑定到 Xamarin.Forms.Color 对象根本不起作用。

第二个问题是需要将 Path 设置为子属性来进行绑定。

设置页面的名称。

x:Name="root"

带装订样式：

 <Style x:Key="wlHeaderGradient1"  TargetType="Frame">
          
            <Setter Property="BorderColor" Value="Purple" />
            <Setter Property="HasShadow" Value="False" />
            <Setter Property="CornerRadius" Value="0" />
            <Setter Property="HeightRequest" Value="100" />
            <Setter Property="WidthRequest" Value="100"/>
            <Setter Property="HorizontalOptions" Value="Center" />
            <Setter Property="VerticalOptions" Value="Center" />
            <Setter Property="Background">
               
                <LinearGradientBrush EndPoint="0,1">
                    <GradientStop Color="{Binding Path = BindingContext.CheckInHeaderBgColor1 ,Source={x:Reference root}}" Offset="0.0" />
                    <GradientStop Color="{Binding Path = BindingContext.CheckInHeaderBgColor2 ,Source={x:Reference root}}" Offset="0.5" />
                    <GradientStop Color="{Binding Path = BindingContext.CheckInHeaderBgColor1 ,Source={x:Reference root}}" Offset="1.0" />
                </LinearGradientBrush>
            </Setter>
        </Style>

xml:

   <StackLayout Orientation="Vertical" HorizontalOptions="Center" VerticalOptions="Start">
        <StackLayout Orientation="Horizontal" HorizontalOptions="Center" VerticalOptions="Start">


            <Frame Style="{StaticResource wlHeaderGradient1}"  x:Name="frmTest1" >
            </Frame>

        </StackLayout>

    </StackLayout>

后面的代码：

 public Page12()
    {
        InitializeComponent();
        this.BindingContext = new HostPublicStyleInfo();
    }

视图模型：

public class HostPublicStyleInfo
{
    public HostPublicStyleInfo()
    {
        CheckInHeaderBgColor1 = "#FF008080";
        CheckInHeaderBgColor2 = "#FFFF6347";
        frmTest2Style = "frmTest2GradientStyle";
    }
    public string frmTest2Style { get; set; }
    public string CheckInHeaderBgColor1 { get; set; }
    public string CheckInHeaderBgColor2 { get; set; }


}

第三个示例，尝试使用动态资源永远不会更新为新颜色（它们保持静态的黑白值），即使我已确保在加载自定义颜色对象时更改了值。

  1. 在 Style 中设置 White-Black-White，而不是在 Frame 中。

    <Style x:Key="wlHeaderGradient2" TargetType="Frame">
         <Setter Property="BorderColor" Value="Purple" />
         <Setter Property="HasShadow" Value="False" />
         <Setter Property="CornerRadius" Value="0" />
         <Setter Property="HeightRequest" Value="100" />
         <Setter Property="WidthRequest" Value="100"/>
         <Setter Property="HorizontalOptions" Value="Center" />
         <Setter Property="VerticalOptions" Value="Center" />
         <Setter Property="Background">
             <LinearGradientBrush EndPoint="0,1">
                 <GradientStop Color="{DynamicResource grdHeaderBGColor1}" Offset="0.0" />
                 <GradientStop Color="{DynamicResource  grdHeaderBGColor2}" Offset="0.5" />
                 <GradientStop Color="{DynamicResource grdHeaderBGColor1}" Offset="1.0" />
             </LinearGradientBrush>
         </Setter>
     </Style>

    然后你可以用新的风格覆盖它。frmTest2GradientStyle 是我在 Application.Resources 中设置的样式。

    frmTest2.Style = (Style)Application.Current.Resources["frmTest2GradientStyle"];

  2. 如果您在 Frame 中设置背景，如下所示，您可以更改背景而不是背景。

    <Frame x:Name="frmTest3" Style="{StaticResource wlHeaderGradient2}">
             <Frame.Background>
                 <LinearGradientBrush EndPoint="0,1">
                     <GradientStop Color="{DynamicResource grdHeaderBGColor1}" Offset="0.0" />
                     <GradientStop Color="{DynamicResource  grdHeaderBGColor2}" Offset="0.5" />
                     <GradientStop Color="{DynamicResource grdHeaderBGColor1}" Offset="1.0" />
                 </LinearGradientBrush>
             </Frame.Background>
         </Frame>

    更改代码中的背景：

         GradientStopCollection gradientStops = new GradientStopCollection();
     gradientStops.Add(new GradientStop() { Color = Color.Green, Offset = (float)0.0 });
     gradientStops.Add(new GradientStop() { Color = Color.Red, Offset = (float)0.5 });
     gradientStops.Add(new GradientStop() { Color = Color.Green, Offset = (float)1.0 });

     LinearGradientBrush linearGradientBrush = new LinearGradientBrush()
     {
         EndPoint = new Point(0, 1),
         GradientStops = gradientStops
     };

     frmTest3.Background = linearGradientBrush;
于 2021-09-07T09:40:27.207 回答