円グラフを描画する方法

Windows Phone 7

Windows Phoneで円グラフを扱う方法です．


色々調べていると，何やら高価なライブラリを使用しなさい というところが多くて，悩んでました．
そこで簡単に円グラフを描画する方法を思いついたので掲載します．
思いついたというよりは，既にあるのに気付かなかった…という方が正しいかも…


まず必要なものは，ExpressionBlendです．
これがないとこれから使うライブラリがありません．
ExpressionBlendは，試用版もありますし，学生であればDreamSparkなどからダウンロードすることが可能です．
使うものは， Microsoft.Expression.Shapes の pie です
VisualStudio で直接書いてもいいのですが，ExpressionBlend を使いましょう．
ExpressionBlend で，プロジェクトを開いたら，


「アセット」の検索から「pie」と入力しましょう．

これを使えばOKです．
適当に描画して，名前を付けましょう

保存してVisualStudio に戻ると，Microsoft.Expression.Blend.Drawing.dll が追加されているため，再読み込みを行う必要があります．


XAMLでは，

xmlns:es="clr-namespace:Microsoft.Expression.Shapes;assembly=Microsoft.Expression.Drawing"

と

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
	<es:Arc x:Name="my_pie01" ArcThickness="1" ArcThicknessUnit="Percent" EndAngle="360" Fill="#FFF4F4F5" Margin="28,28,28,179" Stretch="None" Stroke="Black" StartAngle="90" UseLayoutRounding="False"/>
</Grid>

が変更箇所となります．


円グラフの開始位置と終了位置を決めるTextBoxと，変更を反映するためのボタンを適当に作ります

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
	<es:Arc x:Name="my_pie01" ArcThickness="1" ArcThicknessUnit="Percent" EndAngle="360" Fill="#FFF4F4F5" Margin="28,28,28,179" Stretch="None" Stroke="Black" StartAngle="90" UseLayoutRounding="False"/>
	<Button x:Name="my_button01" Click="my_button01_Click" Content="Click" Height="92" Margin="8,0,8,8" VerticalAlignment="Bottom"/>
	<TextBox x:Name="start_textbox" InputScope="TelephoneNumber" Text="25" GotFocus="_textbox_GotFocus" Height="75" Margin="8,0,0,100" TextWrapping="Wrap" VerticalAlignment="Bottom" TextAlignment="Center" Width="220" HorizontalAlignment="Left" d:LayoutOverrides="Width"/>
	<TextBox x:Name="end_textbox" InputScope="TelephoneNumber" Text="100" GotFocus="_textbox_GotFocus" Height="75" Margin="0,0,8,100" TextWrapping="Wrap" VerticalAlignment="Bottom" TextAlignment="Center" HorizontalAlignment="Right" Width="220"/>
</Grid>

それぞれのイベントをMainPage.xaml.csに書いていきます

private void my_button01_Click(object sender, RoutedEventArgs e)
{
	changePie(start_textbox.Text, end_textbox.Text);
}

private void _textbox_GotFocus(object sender, RoutedEventArgs e)
{
	((TextBox)sender).SelectAll();
}

// 円グラフを変更
private void changePie(string start, string end)
{
	try
	{
		double s = Double.Parse(start);
		double e = Double.Parse(end);
		// 範囲外を排除
		if (s < 0)
		{
			s = 0;
			start_textbox.Text = "0";
		}
		else if (s > 100)
		{
			s = 100;
			start_textbox.Text = "100";
		}
		if (e < 0)
		{
			e = 0;
			end_textbox.Text = "0";
		}
		else if (e > 100)
		{
			e = 100;
			end_textbox.Text = "100";
		}
		my_pie01.StartAngle = 360 * (s / 100);  // 開始位置を角度で指定
		my_pie01.EndAngle = 360 * (e / 100);	// 終了位置を角度で指定
	}
	catch (Exception)
	{
		MessageBox.Show("入力が正しくありません");
	}
}

これでおしまいです．
肝心な部分は，

my_pie01.StartAngle = 360 * (s / 100);  // 開始位置を角度で指定
my_pie01.EndAngle = 360 * (e / 100);	// 終了位置を角度で指定

ここです．
StartAngleとEndAngleで角度を指定するだけでどんな扇形でも描画することができます．
円グラフにするには，複数のpieを用いて，それぞれの角度を指定することで実現することができます．


実行結果は以下の通りです．