C#•7d ago

WPF Layout (I suck still)

Trying to make a window look like the one in the attachment I did in Adobe XD. Added is what I get. I'm so close! Removed the stack panels as @leowest said to. Thank you ❤️

95 Replies

Temporal NightmareOP•7d ago

Discord won't let me go post big code blocks w/o Nitro

ACiDCA7•7d ago

$paste

MODiX•7d ago

If your code is too long, you can post to https://paste.mod.gg/, save, and copy the link into chat for others to see your shared code!

Temporal NightmareOP•7d ago

good point, this app i wont put public on github because its not meant to be open

Temporal NightmareOP•7d ago

https://paste.mod.gg/vieagyxnfkpn/0

BlazeBin - vieagyxnfkpn

A tool for sharing your source code with the world!

Temporal NightmareOP•7d ago

I could remove the background on grid, was experimenting heh I could drag/drop stuff but that's not how WPF is designed even the tools exist

ACiDCA7•7d ago

so what is your question?

Temporal NightmareOP•7d ago

        <Button Grid.Column="1" Grid.Row="1" Name="BrowseFile" 
                Content="Browse File" 
                Margin="10,0,0,15"/>

        <Button Grid.Column="1" Grid.Row="1" Name="BrowseFolder" 
                Content="Browse Folder"
                Margin="110,0,0,15"/>

        <Button Grid.Column="1" Grid.Row="1" Name="BrowseFile" 
                Content="Browse File" 
                Margin="10,0,0,15"/>

        <Button Grid.Column="1" Grid.Row="1" Name="BrowseFolder" 
                Content="Browse Folder"
                Margin="110,0,0,15"/>

updated this

Temporal NightmareOP•7d ago

trying to get it to be more like this from my Adobe XD mockup but added the 2 buttons as an after thought so they would still be next to the input box

leowest•7d ago

that is 5 rows in a grid and u would have to add some click events to input I suppose for it to open the browser dialog or something and if u dont specify a width in your inputbox it will take the size of the row to modify the window u would use windowchrome you can make rounded corners etc

Temporal NightmareOP•7d ago

yep im aware of the commands, didnt do them yet 🙂 even though I have fluent theme?

leowest•7d ago

I mean if ur happy with it

Temporal NightmareOP•7d ago

<Application x:Class="Fusion.App.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:local="clr-namespace:Fusion.App"
             ThemeMode="System">
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="pack://application:,,,/PresentationFramework.Fluent;component/Themes/Fluent.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>

</Application>

<Application x:Class="Fusion.App.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:local="clr-namespace:Fusion.App"
             ThemeMode="System">
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="pack://application:,,,/PresentationFramework.Fluent;component/Themes/Fluent.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>

</Application>

or is Fluent a mess? It was recommended by a vtuber

leowest•7d ago

I mean it certainly misses certain things from the orignal but but wouldnt really say its a mess and it was added to .net 9 for a reason

Temporal NightmareOP•7d ago

ah I'm afraid im mixing and mashing themes/schemes now :/

Temporal NightmareOP•7d ago

getting closer 😄

ero•7d ago

<Grid Background="#FF1E1E1E">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="Auto"/>
    </Grid.ColumnDefinitions>

    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>

        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <!-- Input -->
    <Label Grid.Row="0" Grid.Column="0"
            Content="Input"/>

    <TextBox Grid.Row="1" Grid.Column="0"
                Grid.RowSpan="2"/>

    <Button Grid.Row="1" Grid.Column="1"
            Content="Browse File"/>

    <Button Grid.Row="1" Grid.Column="2"
            Content="Browse Folder"/>

    <!--- Output -->
    <Label Grid.Row="3" Grid.Column="0"
            Grid.ColumnSpan="3"
            Content="Output"/>

    <TextBox Grid.Row="4" Grid.Column="0"
                Grid.RowSpan="2" Grid.ColumnSpan="2"/>

    <Button Grid.Row="4" Grid.Column="2"
            Content="Generate"/>
</Grid>

<Grid Background="#FF1E1E1E">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="Auto"/>
    </Grid.ColumnDefinitions>

    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>

        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <!-- Input -->
    <Label Grid.Row="0" Grid.Column="0"
            Content="Input"/>

    <TextBox Grid.Row="1" Grid.Column="0"
                Grid.RowSpan="2"/>

    <Button Grid.Row="1" Grid.Column="1"
            Content="Browse File"/>

    <Button Grid.Row="1" Grid.Column="2"
            Content="Browse Folder"/>

    <!--- Output -->
    <Label Grid.Row="3" Grid.Column="0"
            Grid.ColumnSpan="3"
            Content="Output"/>

    <TextBox Grid.Row="4" Grid.Column="0"
                Grid.RowSpan="2" Grid.ColumnSpan="2"/>

    <Button Grid.Row="4" Grid.Column="2"
            Content="Generate"/>
</Grid>

thoughts just removed everything that was annoying me

Temporal NightmareOP•7d ago

Why 6 rows? oh, one per control

ero•7d ago

well i figured you still wanna be able to resize the window well no, not really

Temporal NightmareOP•7d ago

maybe, haven't decided yet

ero•7d ago

there's basically 2 "unoccupied" rows which the text boxes span into the idea was that text boxes may expand downwards but can never get smaller than the buttons? but who knows if my wpf knowledge is still good enough

Temporal NightmareOP•7d ago

I am as bad don't worry, it took me 15 years to be pulled from WinForms had to be dragged kicking and screaming 😂

Temporal NightmareOP•7d ago

progress im playing with the example you did

ero•7d ago

the input box is spanning 1 column too much

Temporal NightmareOP•7d ago

ok fixed

ero•7d ago

ah yeah i guess you can just remove the span

Temporal NightmareOP•7d ago

i did

ero•7d ago

the rest is because you use margins for whatever reason

Temporal NightmareOP•7d ago

yeah but w/o margins things get squished together w/o margins:

Temporal NightmareOP•7d ago

ero•7d ago

what i personally did in the past (idk if others do it differently) is just add another column in between there you have to adjust all the column numbers on the other controls of course

Temporal NightmareOP•7d ago

is that even common? i dont wanna get fired if i get a job 😦

ero•7d ago

<Grid.ColumnDefinitions>
    <ColumnDefinition Width="*"/>
    <ColumnDefinition Width="5"/>
    <ColumnDefinition Width="Auto"/>
    <ColumnDefinition Width="5"/>
    <ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>

<Grid.ColumnDefinitions>
    <ColumnDefinition Width="*"/>
    <ColumnDefinition Width="5"/>
    <ColumnDefinition Width="Auto"/>
    <ColumnDefinition Width="5"/>
    <ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>

for example but yeah you can work with margins

Temporal NightmareOP•7d ago

i mean it's logicial ^

ero•7d ago

just make sure you only use left and/or right i think either 5,0 or 0,5 will apply to only the sides

Temporal NightmareOP•7d ago

ok, good point forgot, shorthand

Temporal NightmareOP•7d ago

    <Grid Margin="20">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="Auto"/>
        </Grid.ColumnDefinitions>

        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>

            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>


        <!-- Input -->
        <Label Grid.Row="0" Grid.Column="0" 
               Content="String Input"/>
        
        <TextBox Grid.Row="1" Grid.Column="0"
                 Name="HashInput"                  
                 Margin="0,0,0,20"                    
                 Text="{Binding StringInput, UpdateSourceTrigger=PropertyChanged}"/>

        <Button Grid.Row="1" Grid.Column="1" 
                Name="BrowseFile" 
                Margin="10,0,0,20"
                Content="Browse File" />

        <Button Grid.Row="1" Grid.Column="2" 
                Name="BrowseFolder" 
                Margin="10,0,0,20"
                Content="Browse Folder" />
        
        <!--- Output -->
        <Label Grid.Row="2" 
               Grid.Column="0" 
               Content="Output" />
        <TextBox Grid.Row="4" 
                 Grid.Column="0"
                 Name="HashOutput" 
                 Margin="0,0,0,20" 
                 Text="{Binding HashOutput}" IsReadOnly="True"/>
      
        <!-- Buttons -->
        <Button Grid.Row="4" 
                Grid.Column="2" 
                Name="GenerateHash"       
                Content="Generate" 
                Command="{Binding GenerateHashCommand}"/>
    </Grid>

    <Grid Margin="20">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="Auto"/>
        </Grid.ColumnDefinitions>

        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>

            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>


        <!-- Input -->
        <Label Grid.Row="0" Grid.Column="0" 
               Content="String Input"/>
        
        <TextBox Grid.Row="1" Grid.Column="0"
                 Name="HashInput"                  
                 Margin="0,0,0,20"                    
                 Text="{Binding StringInput, UpdateSourceTrigger=PropertyChanged}"/>

        <Button Grid.Row="1" Grid.Column="1" 
                Name="BrowseFile" 
                Margin="10,0,0,20"
                Content="Browse File" />

        <Button Grid.Row="1" Grid.Column="2" 
                Name="BrowseFolder" 
                Margin="10,0,0,20"
                Content="Browse Folder" />
        
        <!--- Output -->
        <Label Grid.Row="2" 
               Grid.Column="0" 
               Content="Output" />
        <TextBox Grid.Row="4" 
                 Grid.Column="0"
                 Name="HashOutput" 
                 Margin="0,0,0,20" 
                 Text="{Binding HashOutput}" IsReadOnly="True"/>
      
        <!-- Buttons -->
        <Button Grid.Row="4" 
                Grid.Column="2" 
                Name="GenerateHash"       
                Content="Generate" 
                Command="{Binding GenerateHashCommand}"/>
    </Grid>

well its closer cuz you made it i suck at this 😦 if i had $ id hire a designer, im a backend guy in C#

ero•7d ago

idk what's with the generate button, but you removed some spans that i'd probably keep. namely rowspan 2 on both textboxes and columnspan 2 on the output textbox other than that :idk:

Temporal NightmareOP•7d ago

yeah i need to re-add span to output, 1 sec input is fine because i need those buttons

ero•7d ago

rowspan on the input textbox. not columnspan

Temporal NightmareOP•7d ago

on which control? this is where winforms is king tbh

leowest•7d ago

guess you're in good hands

ero•7d ago

HashInput TextBox and HashOutput TextBox

Temporal NightmareOP•7d ago

you drag/drop, resize they're doing ok i think ok

ero•7d ago

and lose the ability to resize the window :p

leowest•7d ago

:harold:

Temporal NightmareOP•7d ago

ffs i give up i want the window to be fluid not everyone has a 4K monitor

ero•7d ago

reactive? or what do you mean by fluid

Temporal NightmareOP•7d ago

i dont know i want it to be whatever 2025 standards are in C# as mentioned before, i am not a designer

Temporal NightmareOP•7d ago

ero•7d ago

2025 standards is probably not to use c# for desktop dev

Temporal NightmareOP•7d ago

if i could take this and export to WPF id do it

ero•7d ago

but idk i'm not one either

Temporal NightmareOP•7d ago

i did it in XD wtf is C# for now then? beans? this entire server IS C# i dont want a damn web app that people get high off of today

ero•7d ago

there's a lot more you can code other than desktop apps lol

Temporal NightmareOP•7d ago

its so juvenile and boring this is why every app looks like every other app if i wanted a world of grays and blacks, i would remove my eyeballs and put in a camera we need colors, style etc bad enough i gotta follow 'trends' or be out of the loop sorry, i've been given so many ways to do stuff and nothing seems to be standard and its confusing to a adhd person like me

ero•7d ago

there's no one correct answer otherwise there wouldn't be this many frameworks to do everything in

Temporal NightmareOP•7d ago

now it's ass :/

ero•7d ago

yeah i just copy pasted this into a new wpf project and it worked without changes (though missing the margins of course)

ero•7d ago

Temporal NightmareOP•7d ago

yeah im sure it works fine i dont need a giant box like that its a 1 line input and output on both i appreciate your help it looks way bette than before if anything 🙂

ero•7d ago

i personally just envision the <Grid> as a, well, literal grid, in my head. i put controls into the individual cells, make some controls span over multiple cells if i need, and that's already 90% of your layout everything else is fine tuning

Temporal NightmareOP•7d ago

is it passable? not sure why i have a gap between output and the output textbox

ero•7d ago

well, that's all for you to decide, you said no one else will use the app :p

Temporal NightmareOP•7d ago

        <Button Grid.Row="1" Grid.Column="1" 
                Name="BrowseFile" 
                Margin="10,0,0,20"
                Content="Browse File" />

        <Button Grid.Row="1" Grid.Column="2" 
                Name="BrowseFolder" 
                Margin="10,0,0,20"
                Content="Browse Folder" />
        
        <!--- Output -->
        <Label Grid.Row="2" Grid.Column="0" 
               Content="Output" />
        
        <TextBox Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="2"
                 Name="HashOutput" 
                 Margin="0,0,0,20" 
                 Text="{Binding HashOutput}" IsReadOnly="True"/>
      
        <!-- Buttons -->
        <Button Grid.Row="3" Grid.Column="2" 
                Name="GenerateHash"
                Margin="10,0,0,20"
                Content="Generate" 
                Command="{Binding GenerateHashCommand}"/>
    </Grid>

        <Button Grid.Row="1" Grid.Column="1" 
                Name="BrowseFile" 
                Margin="10,0,0,20"
                Content="Browse File" />

        <Button Grid.Row="1" Grid.Column="2" 
                Name="BrowseFolder" 
                Margin="10,0,0,20"
                Content="Browse Folder" />
        
        <!--- Output -->
        <Label Grid.Row="2" Grid.Column="0" 
               Content="Output" />
        
        <TextBox Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="2"
                 Name="HashOutput" 
                 Margin="0,0,0,20" 
                 Text="{Binding HashOutput}" IsReadOnly="True"/>
      
        <!-- Buttons -->
        <Button Grid.Row="3" Grid.Column="2" 
                Name="GenerateHash"
                Margin="10,0,0,20"
                Content="Generate" 
                Command="{Binding GenerateHashCommand}"/>
    </Grid>

people will but its not gonna be a corporate/sold app, its game modding like 2k games 😄 competiting with other big modders so i can become more than infamous

ero•7d ago

bit of a lofty goal

Temporal NightmareOP•7d ago

also Adobe XD is discontinued apparently so wtf do i use for layout for clients etc they flopped on buying Figma

ero•7d ago

i was gonna say figma but that's more of a prototyping site afaik idk what xd is

Temporal NightmareOP•7d ago

its a designer/prototyper too it was my go to but its no longer maintained apparently

Temporal NightmareOP•7d ago

https://www.figma.com/downloads/

Figma

Figma Downloads | Web Design App for Desktops & Mobile

Download the Figma web design app on desktop for macOS or Windows, plus the font installer and device preview apps.

Temporal NightmareOP•7d ago

figma it is

Temporal NightmareOP•7d ago

I love my custom End Task button 😂

ero•7d ago

you're just not really gonna get a "export to wpf app" anywhere though

Temporal NightmareOP•7d ago

had to use it on XD because it froze im aware, i jsut wanna do quick layout ideas then use wpf and try to do em

Temporal NightmareOP•7d ago

ok i like this more screw XD welp i got a ton of WPF layout to learn for sure I appreciate yours and leowest help a lot i will do what you recommended from now on maybe do the gaps in cols/row def too whos gonna stop me 😂

ero•7d ago

you might get more eyes by starting a discussion in #gui and then moving somewhere else once it gets more complicated

Temporal NightmareOP•7d ago

thank you good idea

ero•7d ago

always get multiple opinions if you can and then make up your own mind (which you will change later anyway :p) just go with the flow, you can't choose the correct thing to do for everything on the first (or 5th) try

Temporal NightmareOP•7d ago

i apprecate it im having fun, thats what counts i doubt game modders care if its a 100% polished professional tool from EA Sports etc as long as its 90% there have a great rest of your day/night is it ok to friend you? wont dm of course w/o permission

ero•7d ago

Nah I think it's better to not even get tempted to move discussion away from here More eyes and all that

Temporal NightmareOP•7d ago

Gaming

Programming

WPF Layout (I suck still)

Did you find this page helpful?