C
C#14mo ago
Kai

✅ Alignment messed up?

The screenshots should explain it. Any idea on how to fix this?
No description
No description
82 Replies
Kai
KaiOP14mo ago
So yea.. the alignment gets messed with
<UserControl x:Class="Discord_RPC.MVVM.View.HomeView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
d:DesignHeight="450" d:DesignWidth="800">
<StackPanel>
<TextBlock Text="Discover"
Foreground="White"
FontSize="28"
Margin="0,75,0,15"
HorizontalAlignment="Center"/>

<StackPanel Orientation="Horizontal">
<!-- Version Panel -->
<Border Width="400"
Height="200" HorizontalAlignment="Center" VerticalAlignment="Center">
<Border.Background>
<LinearGradientBrush StartPoint="1,1" EndPoint="0,0">
<GradientStop Color="#3aa0ff" Offset="0.0"/>
<GradientStop Color="#5bc3ff" Offset="1"/>
</LinearGradientBrush>
</Border.Background>

<Border.Clip>
<RectangleGeometry RadiusX="20"
RadiusY="20"
Rect="0,0,400,200"/>
</Border.Clip>
</Border>

<!-- xyz Panel -->
<Border Width="400"
Height="200" HorizontalAlignment="Center" VerticalAlignment="Center">
<Border.Background>
<LinearGradientBrush StartPoint="0,1" EndPoint="1,0">
<GradientStop Color="#FA9C1B" Offset="0.0"/>
<GradientStop Color="#F5B216" Offset="1"/>
</LinearGradientBrush>
</Border.Background>

<Border.Clip>
<RectangleGeometry RadiusX="20"
RadiusY="20"
Rect="0,0,400,200"/>
</Border.Clip>
</Border>
</StackPanel>
</StackPanel>
</UserControl>
<UserControl x:Class="Discord_RPC.MVVM.View.HomeView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
d:DesignHeight="450" d:DesignWidth="800">
<StackPanel>
<TextBlock Text="Discover"
Foreground="White"
FontSize="28"
Margin="0,75,0,15"
HorizontalAlignment="Center"/>

<StackPanel Orientation="Horizontal">
<!-- Version Panel -->
<Border Width="400"
Height="200" HorizontalAlignment="Center" VerticalAlignment="Center">
<Border.Background>
<LinearGradientBrush StartPoint="1,1" EndPoint="0,0">
<GradientStop Color="#3aa0ff" Offset="0.0"/>
<GradientStop Color="#5bc3ff" Offset="1"/>
</LinearGradientBrush>
</Border.Background>

<Border.Clip>
<RectangleGeometry RadiusX="20"
RadiusY="20"
Rect="0,0,400,200"/>
</Border.Clip>
</Border>

<!-- xyz Panel -->
<Border Width="400"
Height="200" HorizontalAlignment="Center" VerticalAlignment="Center">
<Border.Background>
<LinearGradientBrush StartPoint="0,1" EndPoint="1,0">
<GradientStop Color="#FA9C1B" Offset="0.0"/>
<GradientStop Color="#F5B216" Offset="1"/>
</LinearGradientBrush>
</Border.Background>

<Border.Clip>
<RectangleGeometry RadiusX="20"
RadiusY="20"
Rect="0,0,400,200"/>
</Border.Clip>
</Border>
</StackPanel>
</StackPanel>
</UserControl>
This is the xaml for the right screenshot..
sibber
sibber14mo ago
wpf designer is not accurate
Kai
KaiOP14mo ago
its also in the app
sibber
sibber14mo ago
i recommend not using it
Kai
KaiOP14mo ago
huh..? How should I design then
sibber
sibber14mo ago
use xaml hot reload while the app is running
Kai
KaiOP14mo ago
oh so it just refreshes while the app is running?
sibber
sibber14mo ago
yeah and you see how the actual app will look like because it is the actual app
Kai
KaiOP14mo ago
but I think I found it: The Borders are a fixed size.. Can I make them dynamic so they take on spot in the StackPanel? or rather.. one half
sibber
sibber14mo ago
i dont understand your issue
Kai
KaiOP14mo ago
yes, it is like that in the actual app
Kai
KaiOP14mo ago
its not aligned correctly when inserting the usercontrol
No description
Kai
KaiOP14mo ago
Discover is Centered, but the Borders aren't I assume because it "shrinks", while keeping the borders at a fixed size
sibber
sibber14mo ago
yeah your borders have a fixed size yes
Kai
KaiOP14mo ago
how can I solve that?
sibber
sibber14mo ago
dont set a fixed size
Kai
KaiOP14mo ago
Yea.. but what should I do instead is there a way to get the total width and devide by 2?
sibber
sibber14mo ago
e.g. 4*
Kai
KaiOP14mo ago
what's that?
sibber
sibber14mo ago
you can set the ratios with stars its easier to explain with grid columns so say we have this
<Grid ColumnDefinitions="*,*" />
<Grid ColumnDefinitions="*,*" />
this syntax isnt supported in wpf xaml but it just means 2 columns, with the width set to * for each of them this means that both columns are the same size, so the are is divided equally between them its equivalent to ColumnDefinitions="1*,1*" now if we change that to ColumnDefinitions="2*,1*" that makes the width ratio between them 2:1
Kai
KaiOP14mo ago
Okay
sibber
sibber14mo ago
which means the first column will take 2/3 of the space and the second one will take 1/3 you can do the same thing with the items in the stackpanel so essetially the * makes the sizes relative you get what i mean? so
<StackPanel Orientation="Horizontal">
<!-- Version Panel -->
<Border Width="400*">
...
</Border>

<!-- xyz Panel -->
<Border Width="400*">
...
</Border>
</StackPanel>
<StackPanel Orientation="Horizontal">
<!-- Version Panel -->
<Border Width="400*">
...
</Border>

<!-- xyz Panel -->
<Border Width="400*">
...
</Border>
</StackPanel>
these widths are now relative but a ratio of 400:400 is the same as 1:1 so each will take half so thats the same as
<StackPanel Orientation="Horizontal">
<!-- Version Panel -->
<Border Width="*">
...
</Border>

<!-- xyz Panel -->
<Border Width="*">
...
</Border>
</StackPanel>
<StackPanel Orientation="Horizontal">
<!-- Version Panel -->
<Border Width="*">
...
</Border>

<!-- xyz Panel -->
<Border Width="*">
...
</Border>
</StackPanel>
Kai
KaiOP14mo ago
Yes, trying to implement it xD
sibber
sibber14mo ago
i recommend keeping all sizes relative in your usercontrol
Kai
KaiOP14mo ago
but the star doesnt work
sibber
sibber14mo ago
why what do you get
Kai
KaiOP14mo ago
Wait lemme send u the edited part
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>

<!-- Version Panel -->
<Border Width="*"
Height="200"
Grid.Column="0">
<Border.Background>
<LinearGradientBrush StartPoint="1,1" EndPoint="0,0">
<GradientStop Color="#3aa0ff" Offset="0.0"/>
<GradientStop Color="#5bc3ff" Offset="1"/>
</LinearGradientBrush>
</Border.Background>

<Border.Clip>
<RectangleGeometry RadiusX="20"
RadiusY="20"
Rect="0,0,400,200"/>
</Border.Clip>
</Border>

<!-- xyz Panel -->
<Border Width="400"
Height="200"
Grid.Column="1">
<Border.Background>
<LinearGradientBrush StartPoint="0,1" EndPoint="1,0">
<GradientStop Color="#FA9C1B" Offset="0.0"/>
<GradientStop Color="#F5B216" Offset="1"/>
</LinearGradientBrush>
</Border.Background>

<Border.Clip>
<RectangleGeometry RadiusX="20"
RadiusY="20"
Rect="0,0,400,200"/>
</Border.Clip>
</Border>
</Grid>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>

<!-- Version Panel -->
<Border Width="*"
Height="200"
Grid.Column="0">
<Border.Background>
<LinearGradientBrush StartPoint="1,1" EndPoint="0,0">
<GradientStop Color="#3aa0ff" Offset="0.0"/>
<GradientStop Color="#5bc3ff" Offset="1"/>
</LinearGradientBrush>
</Border.Background>

<Border.Clip>
<RectangleGeometry RadiusX="20"
RadiusY="20"
Rect="0,0,400,200"/>
</Border.Clip>
</Border>

<!-- xyz Panel -->
<Border Width="400"
Height="200"
Grid.Column="1">
<Border.Background>
<LinearGradientBrush StartPoint="0,1" EndPoint="1,0">
<GradientStop Color="#FA9C1B" Offset="0.0"/>
<GradientStop Color="#F5B216" Offset="1"/>
</LinearGradientBrush>
</Border.Background>

<Border.Clip>
<RectangleGeometry RadiusX="20"
RadiusY="20"
Rect="0,0,400,200"/>
</Border.Clip>
</Border>
</Grid>
sibber
sibber14mo ago
a stackpanel wouldve also worked :)
Kai
KaiOP14mo ago
oh.. xD Lemme change it back rq
sibber
sibber14mo ago
you need to make all your widths relative what you have now, makes the first border take all the sapce thats left after the second border takes 400
Kai
KaiOP14mo ago
Invalid property value for Width '1*'
sibber
sibber14mo ago
ah oh right grid
Kai
KaiOP14mo ago
so we need a grid? xD
sibber
sibber14mo ago
you need to set the widths of the grid columns
Kai
KaiOP14mo ago
ahhh im confused
sibber
sibber14mo ago
instead of borders themselves
Kai
KaiOP14mo ago
Still
sibber
sibber14mo ago
<Grid Height="200">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>

<!-- Version Panel -->
<Border Grid.Column="0">
<Border.Background>
<LinearGradientBrush StartPoint="1,1" EndPoint="0,0">
<GradientStop Color="#3aa0ff" Offset="0.0"/>
<GradientStop Color="#5bc3ff" Offset="1"/>
</LinearGradientBrush>
</Border.Background>

<Border.Clip>
<RectangleGeometry RadiusX="20"
RadiusY="20"
Rect="0,0,400,200"/>
</Border.Clip>
</Border>

<!-- xyz Panel -->
<Border Grid.Column="1">
<Border.Background>
<LinearGradientBrush StartPoint="0,1" EndPoint="1,0">
<GradientStop Color="#FA9C1B" Offset="0.0"/>
<GradientStop Color="#F5B216" Offset="1"/>
</LinearGradientBrush>
</Border.Background>

<Border.Clip>
<RectangleGeometry RadiusX="20"
RadiusY="20"
Rect="0,0,400,200"/>
</Border.Clip>
</Border>
</Grid>
<Grid Height="200">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>

<!-- Version Panel -->
<Border Grid.Column="0">
<Border.Background>
<LinearGradientBrush StartPoint="1,1" EndPoint="0,0">
<GradientStop Color="#3aa0ff" Offset="0.0"/>
<GradientStop Color="#5bc3ff" Offset="1"/>
</LinearGradientBrush>
</Border.Background>

<Border.Clip>
<RectangleGeometry RadiusX="20"
RadiusY="20"
Rect="0,0,400,200"/>
</Border.Clip>
</Border>

<!-- xyz Panel -->
<Border Grid.Column="1">
<Border.Background>
<LinearGradientBrush StartPoint="0,1" EndPoint="1,0">
<GradientStop Color="#FA9C1B" Offset="0.0"/>
<GradientStop Color="#F5B216" Offset="1"/>
</LinearGradientBrush>
</Border.Background>

<Border.Clip>
<RectangleGeometry RadiusX="20"
RadiusY="20"
Rect="0,0,400,200"/>
</Border.Clip>
</Border>
</Grid>
Kai
KaiOP14mo ago
oh ahhh uhm Border clip is making a bit of troublke now
sibber
sibber14mo ago
what
Kai
KaiOP14mo ago
<Border.Clip> for the rounded corners
sibber
sibber14mo ago
screenshot
Kai
KaiOP14mo ago
discord is not having it again
Kai
KaiOP14mo ago
No description
Kai
KaiOP14mo ago
in the actual app
sibber
sibber14mo ago
ah youre setting the size for that explicitly as well
Kai
KaiOP14mo ago
monkaHmm
sibber
sibber14mo ago
just set CornerRadius
Kai
KaiOP14mo ago
it doesnt have it
sibber
sibber14mo ago
how
Kai
KaiOP14mo ago
Nevermind lmao I thought I tried that already
sibber
sibber14mo ago
but if youre going to keep all the sizes of the border equal just use a stackpanel
<StackPanel Height="200" Layout="Horizontal">
<!-- Version Panel -->
<Border CornerRadius="20">
<Border.Background>
<LinearGradientBrush StartPoint="1,1" EndPoint="0,0">
<GradientStop Color="#3aa0ff" Offset="0.0"/>
<GradientStop Color="#5bc3ff" Offset="1"/>
</LinearGradientBrush>
</Border.Background>
</Border>

<!-- xyz Panel -->
<Border CornerRadius="20">
<Border.Background>
<LinearGradientBrush StartPoint="0,1" EndPoint="1,0">
<GradientStop Color="#FA9C1B" Offset="0.0"/>
<GradientStop Color="#F5B216" Offset="1"/>
</LinearGradientBrush>
</Border.Background>
</Border>
</Grid>
<StackPanel Height="200" Layout="Horizontal">
<!-- Version Panel -->
<Border CornerRadius="20">
<Border.Background>
<LinearGradientBrush StartPoint="1,1" EndPoint="0,0">
<GradientStop Color="#3aa0ff" Offset="0.0"/>
<GradientStop Color="#5bc3ff" Offset="1"/>
</LinearGradientBrush>
</Border.Background>
</Border>

<!-- xyz Panel -->
<Border CornerRadius="20">
<Border.Background>
<LinearGradientBrush StartPoint="0,1" EndPoint="1,0">
<GradientStop Color="#FA9C1B" Offset="0.0"/>
<GradientStop Color="#F5B216" Offset="1"/>
</LinearGradientBrush>
</Border.Background>
</Border>
</Grid>
Kai
KaiOP14mo ago
stackpanel inside the grid?
sibber
sibber14mo ago
no instead of the grid
Kai
KaiOP14mo ago
can u still use the ratio size? oh ohhh
sibber
sibber14mo ago
it divides equally by default
Kai
KaiOP14mo ago
uhm
Kai
KaiOP14mo ago
No description
sibber
sibber14mo ago
show the whole usercontrol first try adding HorizontalAllignment="Stretch" to the stackpanel
Kai
KaiOP14mo ago
it's the whole
sibber
sibber14mo ago
i meant the code
Kai
KaiOP14mo ago
<UserControl x:Class="Discord_RPC.MVVM.View.HomeView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
d:DesignHeight="450" d:DesignWidth="800">
<StackPanel>
<TextBlock Text="Discover"
Foreground="White"
FontSize="28"
Margin="0,100,0,15"
HorizontalAlignment="Center"/>

<StackPanel Height="200" HorizontalAlignment="Stretch">

<!-- Version Panel -->
<Border CornerRadius="20">
<Border.Background>
<LinearGradientBrush StartPoint="1,1" EndPoint="0,0">
<GradientStop Color="#3aa0ff" Offset="0.0"/>
<GradientStop Color="#5bc3ff" Offset="1"/>
</LinearGradientBrush>
</Border.Background>
</Border>

<!-- xyz Panel -->
<Border CornerRadius="20">
<Border.Background>
<LinearGradientBrush StartPoint="0,1" EndPoint="1,0">
<GradientStop Color="#FA9C1B" Offset="0.0"/>
<GradientStop Color="#F5B216" Offset="1"/>
</LinearGradientBrush>
</Border.Background>
</Border>
</StackPanel>
</StackPanel>
</UserControl>
<UserControl x:Class="Discord_RPC.MVVM.View.HomeView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
d:DesignHeight="450" d:DesignWidth="800">
<StackPanel>
<TextBlock Text="Discover"
Foreground="White"
FontSize="28"
Margin="0,100,0,15"
HorizontalAlignment="Center"/>

<StackPanel Height="200" HorizontalAlignment="Stretch">

<!-- Version Panel -->
<Border CornerRadius="20">
<Border.Background>
<LinearGradientBrush StartPoint="1,1" EndPoint="0,0">
<GradientStop Color="#3aa0ff" Offset="0.0"/>
<GradientStop Color="#5bc3ff" Offset="1"/>
</LinearGradientBrush>
</Border.Background>
</Border>

<!-- xyz Panel -->
<Border CornerRadius="20">
<Border.Background>
<LinearGradientBrush StartPoint="0,1" EndPoint="1,0">
<GradientStop Color="#FA9C1B" Offset="0.0"/>
<GradientStop Color="#F5B216" Offset="1"/>
</LinearGradientBrush>
</Border.Background>
</Border>
</StackPanel>
</StackPanel>
</UserControl>
sibber
sibber14mo ago
the entire usercontrol :)
Kai
KaiOP14mo ago
sorry
sibber
sibber14mo ago
no worries its vertical
Kai
KaiOP14mo ago
xddICANT dont work Wait nvm, where is it vertical?
sibber
sibber14mo ago
huh why doesnt this work wtf
Kai
KaiOP14mo ago
idk
sibber
sibber14mo ago
orientation of the stackpanel
Kai
KaiOP14mo ago
<StackPanel Height="200" Orientation="Horizontal" HorizontalAlignment="Stretch"> Still, nothing :(
sibber
sibber14mo ago
yeah the borders are taking the minimum width which is 0 for some reason
Kai
KaiOP14mo ago
hmm.. So is there another thing we can try? Maybe like getting the current size of the ctrl then deviding by 2?
sibber
sibber14mo ago
im trying to think of a clean solution will the number of controls in the stack panel change? ah im an idiot just use a uniform grid lmao @Mettwasser
<UniformGrid Height="200" Rows="1">
<!-- Version Panel -->
<Border CornerRadius="20">
<Border.Background>
<LinearGradientBrush StartPoint="1,1" EndPoint="0,0">
<GradientStop Offset="0.0" Color="#3aa0ff" />
<GradientStop Offset="1" Color="#5bc3ff" />
</LinearGradientBrush>
</Border.Background>
</Border>

<!-- xyz Panel -->
<Border CornerRadius="20">
<Border.Background>
<LinearGradientBrush StartPoint="0,1" EndPoint="1,0">
<GradientStop Offset="0.0" Color="#FA9C1B" />
<GradientStop Offset="1" Color="#F5B216" />
</LinearGradientBrush>
</Border.Background>
</Border>
</UniformGrid>
<UniformGrid Height="200" Rows="1">
<!-- Version Panel -->
<Border CornerRadius="20">
<Border.Background>
<LinearGradientBrush StartPoint="1,1" EndPoint="0,0">
<GradientStop Offset="0.0" Color="#3aa0ff" />
<GradientStop Offset="1" Color="#5bc3ff" />
</LinearGradientBrush>
</Border.Background>
</Border>

<!-- xyz Panel -->
<Border CornerRadius="20">
<Border.Background>
<LinearGradientBrush StartPoint="0,1" EndPoint="1,0">
<GradientStop Offset="0.0" Color="#FA9C1B" />
<GradientStop Offset="1" Color="#F5B216" />
</LinearGradientBrush>
</Border.Background>
</Border>
</UniformGrid>
Kai
KaiOP14mo ago
whats that Seems to work looks like a cleaner, simplified version of Grid
sibber
sibber14mo ago
it divides space equally between the controls and by limiting the rows to 1 its essentially a stackpanel but instead lf columns of size auto its columns of size * basically
Kai
KaiOP14mo ago
ok gotchu tyvm
sibber
sibber14mo ago
np
Kai
KaiOP14mo ago
how do I close this?
sibber
sibber14mo ago
$close
MODiX
MODiX14mo ago
Use the /close command to mark a forum thread as answered
Kai
KaiOP14mo ago
!close
Accord
Accord14mo ago
Closed!
Want results from more Discord servers?
Add your server