C#•2w ago

✅ WPF

Hi I am wondering why button goes off the window

24 Replies

Rory•2w ago

You're going to have to share the code for this before anyone can advise

monkeyoohlalaOP•2w ago

I mean all I did was start the project and add a button to it but one second let me post the code

Buddy•2w ago

$rulesofwpf

MODiX•2w ago

Rules of WPF:

❌ Avoid the WPF Designer to eliminate a category of confusing bugs
❌ Don't rely on Margin as the primary tool for layouts
❌ Avoid writing UserControls or subclassing to extend a default control -- use Behaviors instead (Microsoft.Xaml.Behaviors.Wpf)

✅ Write XAML by hand and autoformat with "Ctrl K,D" or XAML Styler
✅ Rely upon XAML Hot Reload to design your app's UI at runtime
✅ Use layout controls (Grid, DockPanel, etc) to support proper resizing
✅ Use data binding to eliminate glue code and state synchronization issues
✅ Use collection controls and DataTemplate to dynamically create lists of controls
✅ Learn MVVM to create maintainable apps
✅ Use the Dispatcher to update controls from non-UI threads
✅ WPF's default controls can be easily modernized via $wpfuilibs
✅ Include relevant XAML, code-behind, and ViewModel code for questions when possible

Rules of WPF:

❌ Avoid the WPF Designer to eliminate a category of confusing bugs
❌ Don't rely on Margin as the primary tool for layouts
❌ Avoid writing UserControls or subclassing to extend a default control -- use Behaviors instead (Microsoft.Xaml.Behaviors.Wpf)

✅ Write XAML by hand and autoformat with "Ctrl K,D" or XAML Styler
✅ Rely upon XAML Hot Reload to design your app's UI at runtime
✅ Use layout controls (Grid, DockPanel, etc) to support proper resizing
✅ Use data binding to eliminate glue code and state synchronization issues
✅ Use collection controls and DataTemplate to dynamically create lists of controls
✅ Learn MVVM to create maintainable apps
✅ Use the Dispatcher to update controls from non-UI threads
✅ WPF's default controls can be easily modernized via $wpfuilibs
✅ Include relevant XAML, code-behind, and ViewModel code for questions when possible

monkeyoohlalaOP•2w ago

<Window x:Class="Test.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:Test"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <Button Content="Button" HorizontalAlignment="Left" Height="47" Margin="0,387,0,0" VerticalAlignment="Top" Width="109"/>

    </Grid>
</Window>

<Window x:Class="Test.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:Test"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <Button Content="Button" HorizontalAlignment="Left" Height="47" Margin="0,387,0,0" VerticalAlignment="Top" Width="109"/>

    </Grid>
</Window>

Rory•2w ago

you have a 387 pixel margin from the top of the app in the button there: "0,387,0,0" I am gonna assume you didn't type that xaml by hand to add the button but maybe I'm wrong there, it's all oddly specific numbers in the height, margin, width. Where did you want the button to go?

monkeyoohlalaOP•2w ago

near the bottom left side so I have to write everything by hand? or just the layout part?

Rory•2w ago

Broadly, it's easier to have a layout that works logically if you are hand-crafting the markup. the top two ❌ points here essentially

monkeyoohlalaOP•2w ago

okay im doing a course from udemy

Rory•2w ago

You'd be best learning out how to do some simple layouts with containers like grids, stackpanels and stuff, and then putting your controls and things inside of them. Sorry that's a bit vague, it's hard to outline where to start with it and i've been out of the WPF space for a bit But here if you dropped the margin and changed vertical alignment might that be better?

<Button Content="Button" HorizontalAlignment="Left" Height="47" VerticalAlignment="Bottom" Width="109"/>

<Button Content="Button" HorizontalAlignment="Left" Height="47" VerticalAlignment="Bottom" Width="109"/>

monkeyoohlalaOP•2w ago

yeah so I thought it was drag and drop but I guess I have to code everything which is a pain

Rory•2w ago

The designer does work like that but all it can/will do is place controls in a very fixed way that won't adapt if you resize the app

monkeyoohlalaOP•2w ago

im making an app that is not resizable

Rory•2w ago

Also the controls won't adapt well when you add more controls, but that's very much in your control. That said the rules posted above very much come from a place of how to write good maintainable production WPF code. If you're just starting out, do what works best for you but just know that you can tweak the xaml by hand if it's not looking right Like, here, you could just reduce that margin number a bit and it'd be onscreen

monkeyoohlalaOP•2w ago

okay than ks

Rory•2w ago

np!

monkeyoohlalaOP•2w ago

Should I be using canvas to position my controls?

Rory•2w ago

You could try it. I can't say I've ever tried it. I think it works well for a world of absolute positioning rather than relative

monkeyoohlalaOP•2w ago

how did you move around everything?

Rory•2w ago

Do you mean like structuring the layout?

monkeyoohlalaOP•2w ago

yes

Rory•2w ago

It's been a fair few years since I did WPF but Dockpanels, Stackpanels, Grids and then small adjustments to margins and padding mostly I think. I don't have any good examples to hand sadly

Rory•2w ago

https://github.com/microsoft/WPF-Samples/tree/main/Sample%20Applications

GitHub

WPF-Samples/Sample Applications at main · microsoft/WPF-Samples

Repository for WPF related samples. Contribute to microsoft/WPF-Samples development by creating an account on GitHub.

Rory•2w ago

Some of those look like they might be good small examples you could play with

Gaming

Programming

✅ WPF

Did you find this page helpful?