ナレッジベース

Xuni

Xamarin.Formsのグリッドレイアウトを利用して、画像と円形ゲージを同じ場所に配置すると、
下図のように画像の上にゲージが表示されます。




サンプルコード
XAML（Xamarin.Forms）

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage x:Class="Xuni_QuickStart.Xuni_QuickStartPage"
             xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:Xuni_QuickStart"
             xmlns:xunigauge="clr-namespace:Xuni.Forms.Gauge;assembly=Xuni.Forms.Gauge">
    <Grid VerticalOptions="CenterAndExpand">
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <xunigauge:XuniRadialGauge x:Name="gauge"
                Grid.Row="0"
                Grid.Column="0"
                Max="100"
                Min="0"
                PointerColor="#3498db"
                ShowText="None"
                StartAngle="90"
                SweepAngle="360"
                Thickness="0.08"
                Value="25" />
        <Image x:Name="image"
                Grid.Row="0"
                Grid.Column="0"
                Margin="20" />
    </Grid>
</ContentPage>

上記の内容を技術記事として公開していますので、詳細はこちらを参照ください。

Xuni　＞ 技術情報　＞ ComponentOne Information　
＞ 「Xamarin.Formsでキャラクターのステータスをゲージで表現する」