[Xuni:Gauge] 画像の上に重ねて円形ゲージを表示する方法(Xamarin.Forms)
対象製品
Xuni
詳細
Xamarin.Formsのグリッドレイアウトを利用して、画像と円形ゲージを同じ場所に配置すると、
下図のように画像の上にゲージが表示されます。
サンプルコード
XAML(Xamarin.Forms)
上記の内容を技術記事として公開していますので、詳細はこちらを参照ください。
Xuni > 技術情報 > ComponentOne Information
> 「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でキャラクターのステータスをゲージで表現する」