xamarin.forms - 動的スタイルから色が設定されている場合、Xamarin Forms LinearGradientBrush の Frame が機能しない

Question

スタイルを使用して、線形グラデーションを持つフレームを作成しようとしています。スタイルに色をハードコーディングすると、フレームが正しく表示されます。カスタム アプリ設定オブジェクトのプロパティに色をバインドしようとすると、スタイルが機能しません。以下に例を示します。

これが静的スタイルです。値に問題がないことを確認するために、オブジェクトと同じ色を使用するように構成しました。

        <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 でページ全体を appsetting にバインドします。

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>

更新された 3 つのテスト スタイルは次のとおりです。

       <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>

結果は次のとおりです。

2 番目のサンプル - Xamarin.Forms.Color オブジェクトへのバインドはまったく機能しません。3 番目の例では、動的リソースを使用しようとしても、カスタム カラー オブジェクトがロードされているときに値が変更されていることを確認したにもかかわらず、新しい色に更新されません (静的な黒と白の値のままです)。

ですから、ここでも途方に暮れています。