Why does the button keep going out of bounds? (WPF Application)-CodePudding

I'm quite new to C# so expect faulty/lengthy code for no good reason.

So i was playing around with WPF Applications as i wanted to know how to make a button move when hovered over it- Which i managed to do but now it goes out of bounds?

XAML code:

<Window x:Class="Opdracht7.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:Opdracht7"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <Button x:Name="klikmij" Content="Click me!" MouseEnter="onMouseEnter" Click="onMouseClick" HorizontalAlignment="Center" VerticalAlignment="Center" RenderTransformOrigin="-0.989,-0.519" Height="33" Width="68"/>

    </Grid>
</Window>

C# code dump:

using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using static System.Net.Mime.MediaTypeNames;

namespace Opdracht7
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        private void onm ouseEnter(object sender, MouseEventArgs e)
        {
            Random rnd1 = new Random();
            int value1 = rnd1.Next(0, 250);
            int value2 = rnd1.Next(0, 250);
            int value3 = rnd1.Next(0, 250);
            int value4 = rnd1.Next(0, 250);
            
            Debug.WriteLine(value1);
            Debug.WriteLine(value2);
            Debug.WriteLine(value3);
            Debug.WriteLine(value4);

            klikmij.Margin = new Thickness(value1,value2, value3, value4);
        }
        private void onm ouseClick(object sender, RoutedEventArgs e)
        {
            MessageBox.Show("Congratulations! You won nothing!");
        }

        public MainWindow()
        {
            InitializeComponent();
        }
    }
}

I set random range from 0 to 250, because when i adjust it to the window's actual height 'n width it goes out of bounds even faster. For some strange reason when it goes over 230-ish (could be lower) the button is gone until you enlargen the window size.

Did i overlook a vital piece 'o code?

EDIT: https://gyazo.com/342b20fdbbcef2a4834ab95c37aaf30e <- gif of it happening

EDIT 2: https://gyazo.com/f04e1d64f9880cd01aa53f9169954377 <- gif of resizing window

CodePudding user response：

After playing a bit in the designer with different values, it looks like in Grid margins take precedence, and the button gets smaller to accomodate. In case when it disappears, it's calculated height just becomes 0.

Set width and height for the button manually, then change just the left and top margin, while setting rest to 0:

<Grid>
     <Button Margin="250,250,0,0" Width="100" Height="100">TEST</Button>
</Grid>

Play with values in designer first to see what's happening when.

Better, do not use an element's Margin for layout. For absolute positioning, use a Canvas:

<Grid>
    <Canvas>
        <Button x:Name="klikmij" Content="Click me!" 
                MouseEnter="onMouseEnter" Click="onMouseClick"
                Height="33" Width="68"/>
    </Canvas>
</Grid>

with thic code behind:

private readonly Random rnd = new Random();

private void onm ouseEnter(object sender, MouseEventArgs e)
{
    Canvas.SetLeft(klikmij, rnd.Next(0, 250));
    Canvas.SetTop(klikmij, rnd.Next(0, 250));
}