WPF Canvas Kullanımı (Yön Tuşlarıyla Nesneyi Hareket Ettirme Örneği)

Bu yazımızda Layout bileşenlerinden biri olan Canvas bileşenini kullanarak klavyede yön tuşlarını kullanarak Canvas içerisine yerleştirilmiş nesneyi hareket ettiren bir örnek oluşturacağız. Canvas üzerine bırakılan elementlerin pencerenin sol (Left), sağ (Right), üst (Top) ve alt (Bottom) eksenlerine olan uzaklıklarına göre bir yerleşim planına imkan tanımaktadır. Şimdi bu yerleşimleri nasıl yapacağımıza geçiyoruz.

Örneğimizde form tasarımımız yukarıdaki gibi olacaktır. Burada formumuza eklemiş olduğumuz nesnemizi klavye yön tuşları ile hareket ettireceğiz. Form tasarımımıza ait XAML kodları aşağıdaki gibi olacaktır.


<Window x:Class="canvas.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="www.yazilimkodlama.com" Height="350" Width="525" KeyDown="rec1_KeyDown">
    <Canvas>
        <Rectangle Name="rec1" Fill="Orange" Canvas.Left="30" Width="50" Height="50" 
                   Canvas.Top="50" RenderTransformOrigin="0.5,0.5" RadiusY="50" RadiusX="50">
            <Rectangle.RenderTransform>
                <TransformGroup>
                    <ScaleTransform/>
                    <SkewTransform/>
                    <RotateTransform/>
                    <TranslateTransform X="3"/>
                </TransformGroup>
            </Rectangle.RenderTransform>
        </Rectangle>
    </Canvas>
</Window>

<Window x:Class="canvas.MainWindow"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Title="www.yazilimkodlama.com" Height="350" Width="525" KeyDown="rec1_KeyDown">

<Rectangle Name="rec1" Fill="Orange" Canvas.Left="30" Width="50" Height="50"

Canvas.Top="50" RenderTransformOrigin="0.5,0.5" RadiusY="50" RadiusX="50">

<Rectangle.RenderTransform>

</TransformGroup>

</Rectangle.RenderTransform>

</Rectangle>

</Canvas>

</Window>

Yukarıdaki XAML kodları incelediğimizde Formumuza eklediğimiz nesnenin aslında bir Rectangle nesnesi olduğunu ve RadiusX ve RadiusY özelliklerinin değiştirilerek Daire şekline getirildiğini görmekteyiz.

Şimdi C# kodlarına geçiyoruz. Kodlarımız Klavyeden tuşa basıldığında çalışacak. Bu iş için KeyDown event’ ını kullanacağız. XAML kod penceresinde Window etiketine tıkladıktan sonra Properties penceresinde Events bölümünde KeyDown olayına çift tıklıyoruz.

Daha sonra açılan kod penceresinde aşağıdaki C# kodlarını yazarak projemizi tamamlamış oluyoruz.


 private void rec1_KeyDown(object sender, KeyEventArgs e)
        {
            int sol;
            int ust;
            ust=Convert.ToInt32(Canvas.GetTop(rec1));
            sol= Convert.ToInt32(Canvas.GetLeft(rec1));

            if (e.Key==Key.Left)
            {
                Canvas.SetLeft(rec1, sol - 20);
            }
            else if (e.Key == Key.Right)
            {
                Canvas.SetLeft(rec1, sol + 20);
            }
            else if (e.Key == Key.Down)
            {
                Canvas.SetTop(rec1, ust + 20);
            }
            else if (e.Key == Key.Up)
            {
                Canvas.SetTop(rec1, ust - 20);
            }
           
        }

private void rec1_KeyDown(object sender, KeyEventArgs e)

{

int sol;

int ust;

ust=Convert.ToInt32(Canvas.GetTop(rec1));

sol= Convert.ToInt32(Canvas.GetLeft(rec1));

if (e.Key==Key.Left)

{

Canvas.SetLeft(rec1, sol - 20);

}

else if (e.Key == Key.Right)

{

Canvas.SetLeft(rec1, sol + 20);

}

else if (e.Key == Key.Down)

{

Canvas.SetTop(rec1, ust + 20);

}

else if (e.Key == Key.Up)

{

Canvas.SetTop(rec1, ust - 20);

}

Bunu paylaş:

Şunlar da Hoşunuza Gidebilir

Yorum yap X