c# - イメージをキャンバスの中央に配置

Question

私はImage内部に aを持っていCanvasます:

<Canvas>
    <Image HorizontalAlignment="Center" VerticalAlignment="Center" />
</Canvas>

Image そして、常に（サイズ変更の可能性がある後でも）を私の中心に表示したいのですCanvasが、このようにして、画像は左上隅に描画されます。どのようにできるのか？

Answer 1

このアプローチの最もクールな点は、画像とキャンバスの両方のサイズを変更すると機能することです。コンバーターコード:

internal sealed class CenterConverter : IMultiValueConverter
{
    public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture)
    {
        double canvasWidth = System.Convert.ToDouble(values[0]);
        double canvasHeight = System.Convert.ToDouble(values[1]);
        double controlWidth = System.Convert.ToDouble(values[2]);
        double controlHeight = System.Convert.ToDouble(values[3]);
        switch ((string)parameter)
        {
            case "top":
                return (canvasHeight - controlHeight) / 2;
            case "bottom":
                return (canvasHeight + controlHeight) / 2;
            case "left":
                return (canvasWidth - controlWidth) / 2;
            case "right":
                return (canvasWidth + controlWidth) / 2;
            default:
                return 0;
        }
    }

    public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

XAML、リソースのどこかに：

    <local:CenterConverter x:Key="CenterConverter" />

XAML:

<Canvas x:Name="superCoolCanvas">
    <Image x:Name="superCoolImage" >
        <Canvas.Top>
            <MultiBinding Converter="{StaticResource CenterConverter}" ConverterParameter="top">
                <Binding ElementName="superCoolCanvas" Path="ActualWidth" />
                <Binding ElementName="superCoolCanvas" Path="ActualHeight" />
                <Binding ElementName="superCoolImage" Path="ActualWidth" />
                <Binding ElementName="superCoolImage" Path="ActualHeight" />
            </MultiBinding>
        </Canvas.Top>
        <Canvas.Left>
            <MultiBinding Converter="{StaticResource CenterConverter}" ConverterParameter="left">
                <Binding ElementName="superCoolCanvas" Path="ActualWidth" />
                <Binding ElementName="superCoolCanvas" Path="ActualHeight" />
                <Binding ElementName="superCoolImage" Path="ActualWidth" />
                <Binding ElementName="superCoolImage" Path="ActualHeight" />
            </MultiBinding>
        </Canvas.Left>
    </Image>
</Canvas>

Answer 2

Canvas は絶対座標を使用することを意図しています。dwrd が提供するソリューションを使用するか、Canvas と Image の両方を Grid に配置してから、Image をこの Grid の中央に配置することができます。