WPF user Align items - wpf

My app needs to have items in be aligned by the user; left, right and center. I am having an issue formating the app to handle this, meaning that application can either align left or right or center but not all three. How can I get the items for example 5 buttons to be aligned left, right and center changed via a button press (I should know how to do this once I am able to actual format in XMLA)?
My first thought would be do this with a dock panel;
<DockPanel MinWidth="500" Background="LightGray" Margin="20" LastChildFill="False">
<Button Margin="10" DockPanel.Dock="Left" >one</Button>
<Button Margin="10" DockPanel.Dock="Left">two</Button>
<Button Margin="10" DockPanel.Dock="Left">three</Button>
<Button Margin="10" DockPanel.Dock="Left">four</Button>
<Button Margin="10" DockPanel.Dock="Left">five</Button>
</DockPanel>
This works great for Left and right alignment. The problem is that there is no DockPanel.Dock="Center"
Next tried a Grid;
<Grid Background="LightGray" MinWidth="500">
<Button HorizontalAlignment="Left" Margin="10,10,10,10">one</Button>
<Button HorizontalAlignment="Left" Margin="10,10,10,10">two</Button>
<Button HorizontalAlignment="Left" Margin="10,10,10,10">three</Button>
<Button HorizontalAlignment="Left" Margin="10,10,10,10">four</Button>
<Button HorizontalAlignment="Left" Margin="10,10,10,10">five</Button>
</Grid>
Problem is that this happens;
edit: Apparently I didn't make the my question clear enough.
edit2: #Henka Programmer suggestion below did not work. First I believe he meant HorizontalAlignment not VerticalAlignment. With this code;
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right" Background="LightGray" MinWidth="500">
<Button Content="btn 01" />
<Button Content="btn 02" />
<Button Content="btn 03" />
<Button Content="btn 0" />
</StackPanel>
Gives this result;
Changing HorizontalAlignment="Right" to HorizontalAlignment="Center" makes no difference

The horizontal alignment property on the StackPanel is going to align the StackPanel relative to its parent element. This works just fine:
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="1000">
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Top">
<Button Content="Button 1" />
<Button Content="Button 2" />
<Button Content="Button 3" />
<Button Content="Button 4" />
<Button Content="Button 5" />
</StackPanel>
</Window>

i think you mean this:
// ...
<Grid>
<StackPanel Orientation="Horizontal" VerticalAlignment="Center">
<Button Content="btn 01" />
<Button Content="btn 02" />
<Button Content="btn 03" />
<Button Content="btn 0" />
</StackPanel>
</Grid>
// ...
and you can change the alignment of StackPanel with:
VeriticalAlignment="Center"
VeriticalAlignment="Right"
VeriticalAlignment="Left"
and the StackPanel Orientation :
Vertical
Horizontal

Related

Prevent elements in the DockPanel from expanding

I have the following code where I want to prevent the first two buttons from expanding when the Expander is opened:
<Grid>
<DockPanel HorizontalAlignment="Left">
<Button Content="AAAAA" DockPanel.Dock="Top"/>
<Button Content="AAAAA" DockPanel.Dock="Top"/>
<Expander>
<Button Content="AAAAAAAAAA" DockPanel.Dock="Top"/>
</Expander>
</DockPanel>
</Grid>
I would appreciate help on how to do this in a clean way.
This is happening to you because the default value of HorizontalAlignment is Stretch.
Therefore, to achieve the result you asked for, you need to do this:
<Grid>
<DockPanel HorizontalAlignment="Left">
<Button Content="AAAAA" DockPanel.Dock="Top" HorizontalAlignment="Left"/>
<Button Content="AAAAA" DockPanel.Dock="Top" HorizontalAlignment="Left"/>
<Expander>
<Button Content="AAAAAAAAAA" DockPanel.Dock="Top"/>
</Expander>
</DockPanel>
</Grid>

WPF left button, centered text, right button in a custom control

I'm trying to prototype a new custom control that has a left button, text, and right button.
The XAML looks like this:
<StackPanel Width="250" Orientation="Vertical" >
<DockPanel Background="Azure" Width="250">
<Button Name="btnLeft" HorizontalAlignment="Left" Width="30" Background="DarkGray" Click="btnAdd_Click" Template="{DynamicResource StandardButtonTemplate1}">
<StackPanel Orientation="Horizontal">
<Image Source="/Images/Previous25px.png" VerticalAlignment="Center" Name="imgLeft"></Image>
</StackPanel>
</Button>
<TextBlock Name="tblkModelType" HorizontalAlignment="Center" Foreground="Black" FontSize="20">Import</TextBlock>
<Button Name="btnRight" HorizontalAlignment="Right" Width="30" Background="DarkGray" Click="btnAdd_Click" Template="{DynamicResource StandardButtonTemplate1}" >
<StackPanel Orientation="Horizontal">
<Image Source="/Images/Next25px.png" VerticalAlignment="Center" Name="imgRight"></Image>
</StackPanel>
</Button>
</DockPanel>
</StackPanel>
The buttons are left and right justified ok, but the (tblkModelType) is left justified right up next to the left button. It doesn't appear that HorizontalAlignment on that tag does anything. If I remove the right button, the TextBlock does center.
Anyone know how to get the buttons on the outside and the TextBlock centered in the Dockpanel? I guess I could use a grid, but it would make the rest of the control more complex.
This should work:
<DockPanel Background="Azure" Width="250" >
<Button DockPanel.Dock="Left" Name="btnLeft" Width="30" Background="DarkGray" Click="btnAdd_Click" Template="{DynamicResource StandardButtonTemplate1}">
<StackPanel Orientation="Horizontal">
<Image Source="/Images/Previous25px.png" VerticalAlignment="Center" Name="imgLeft"></Image>
</StackPanel>
</Button>
<Button DockPanel.Dock="Right" Name="btnRight" Width="30" Background="DarkGray" Click="btnAdd_Click" Template="{DynamicResource StandardButtonTemplate1}" >
<StackPanel Orientation="Horizontal">
<Image Source="/Images/Next25px.png" VerticalAlignment="Center" Name="imgRight"></Image>
</StackPanel>
</Button>
<TextBlock DockPanel.Dock="Top" HorizontalAlignment="Center" Name="tblkModelType" Foreground="Black" FontSize="20">Import</TextBlock>
</DockPanel>
Use DockPanel.Dock to dock btnLeft to the left of the DockPanel, btnRight to the right. Then for tblkModelType set DockPanel.Dock="Top". This will stretch the TextBlock to the entire width of the DockPanel between buttons.
This works for me. As you said your control is more complex, so in case of any problem share more xaml with us.

WPF Canvas as content inside button is not visible if adjacent element fills the space inside a container (DockPanel, Grid)

I have a button like so:
<StackPanel Orientation="Vertical" Width="200">
<DockPanel LastChildFill="False">
<Grid Width="81" Background="Blue" DockPanel.Dock="Right" />
<Button Width="120" DockPanel.Dock="Left">
<Grid>
<TextBlock Text="Button" ></TextBlock>
<Canvas Margin="120,0,0,0" >
<TextBlock Text="I want to break free" />
</Canvas>
</Grid>
</Button>
</DockPanel>
</StackPanel>
In this case the canvas content will not get rendered and it's content won't be visible.
If I however change the Grid lengths from 81 to 80 it works.
It will also work in this scenario:
<Grid Width="200">
<Grid Width="81" Background="Blue" DockPanel.Dock="Right" HorizontalAlignment="Right" Grid.Column="1" />
<Button Width="120" HorizontalAlignment="Left">
<Grid>
<TextBlock Text="Button" ></TextBlock>
<Canvas Margin="120,0,0,0" >
<TextBlock Text="I want to break free" />
</Canvas>
</Grid>
</Button>
</Grid>
The Canvas will also work if not inside a button:
<StackPanel Orientation="Vertical" Width="200">
<DockPanel LastChildFill="False" Height="42">
<Grid Width="81" Background="Blue" DockPanel.Dock="Right" />
<Canvas Margin="120,0,0,0" >
<TextBlock Text="I want to break free" />
</Canvas>
</DockPanel>
</StackPanel>
Why is it behaving like that inside a button? How can be this fixed to the wanted behavior of showing the canvas?

Make content inside Button responsive in WPF

I have vertical navigation bar. Each button of the navigation has it's own image and text. For now the image has static height set to Height="50"and text has the default value. When I resize the window the buttons grow responsive but the content inside keeps the same size.
This is how it look right now:
https://gyazo.com/48cff48437b66f462dccd23639dd59ac (GIF)
My XAML code:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="10*"/>
<ColumnDefinition Width="2*"/>
</Grid.ColumnDefinitions>
<UniformGrid Background="DodgerBlue" Grid.Column="1" Columns="1">
<Button BorderThickness="0" Background="DodgerBlue">
<StackPanel>
<Image Source="Icons/home-5-xxl.png" Height="50" Margin="0,0,0,10"/>
<TextBlock HorizontalAlignment="Center" Foreground="White" FontWeight="Bold">Home</TextBlock>
</StackPanel>
</Button>
<Button BorderThickness="0" Background="DodgerBlue">
<StackPanel>
<Image Source="Icons/search-3-xxl.png" Height="50" Margin="0,0,0,10"/>
<TextBlock HorizontalAlignment="Center" Foreground="White" FontWeight="Bold">Search</TextBlock>
</StackPanel>
</Button>
<Button BorderThickness="0" Background="DodgerBlue">
<StackPanel>
<Image Source="Icons/twitter-xxl.png" Height="50" Margin="0,0,0,10"/>
<TextBlock HorizontalAlignment="Center" Foreground="White" FontWeight="Bold">Twitter</TextBlock>
</StackPanel>
</Button>
<Button BorderThickness="0" Background="DodgerBlue">
<StackPanel>
<Image Source="Icons/chat-4-xxl.png" Height="50" Margin="0,0,0,10"/>
<TextBlock HorizontalAlignment="Center" Foreground="White" FontWeight="Bold">Chat</TextBlock>
</StackPanel>
</Button>
</UniformGrid>
</Grid>
How could i make content inside the Buttons responsive and grow when the button grows in XAML WPF?
Use Viewbox as shown here.
<Viewbox Stretch="Uniform">
<Button ... />
</Viewbox>

Why is my dockpanel's LastChild overflowing its container?

I have a DockPanel with LastChildFill = true. It has 4 children: a StackPanel(top), another DockPanel(top), and three more StackPanels(bottom, left & none respectively). The last StackPanel ("ResultsPanel") has no DockPanel.Dock property set, nor does it have a width/height, yet when the databinding results in more rows than fit on the screen, it continues down behind the bottom-docked StackPanel. I would expect it to fill the center "hole" that I left between the other docked children.
If I leave the ScrollBarVisibilities set to Auto, it doesn't even show them. Any advice would be appreciated. Here is the pertinent code:
<DockPanel Name="JobsDock" LastChildFill="True">
<StackPanel DockPanel.Dock="Top" Height="40" >
<Label />
<Border CornerRadius="5" Width="90" Height="25" >
<Label Content="Classic View" />
</Border>
</StackPanel>
<DockPanel DockPanel.Dock="Top" Height="70" Name="SearchJobsPanel" >
<ComboBox Name="SearchOptionComboBox" VerticalAlignment="Bottom" Width="240" />
<StackPanel Height="50" Name="JobPanel" Width="90" Visibility="Collapsed" VerticalAlignment="Bottom" >
<Label Content="Job Number" HorizontalAlignment="Center" />
<TextBox Name="JobTextBox" />
</StackPanel>
<StackPanel VerticalAlignment="Bottom" HorizontalAlignment="Right">
<Button Height="25" Name="SearchButton" Width="90">
<StackPanel Orientation="Horizontal">
<Image Stretch="Fill" Margin="0,0,5,0" />
<Label Content="Search" FontSize="10" VerticalContentAlignment="Top" />
</StackPanel>
</Button>
</StackPanel>
</DockPanel>
<StackPanel Name="FiltersPanel" DockPanel.Dock="Left" Width="120" Opacity="0" >
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
<Button Name="ResetFilterButton" >
<Image Source="Images/ResetFilter.png" Width="30" />
</Button>
<Button Name="ApplyFilterButton" >
<Image Width="30" />
</Button>
</StackPanel>
<Label Name="ProjectsLabel" />
<Label Name="TasksLabel" Margin="0,10,0,0" />
</StackPanel>
<StackPanel Name="ResultsPanel" Opacity="0">
<ListView x:Name="DisplayedJobListView" ScrollViewer.VerticalScrollBarVisibility="Visible" >
<ListView.View>
<GridView>
</GridView>
</ListView.View>
</ListView>
</StackPanel>
Jurgen, on the msdn forum answered this question for me. Here is his reply:
Hi,
the last (filling) DockPanel child is a StackPanel ("ResultsPanel"). A StackPanel's layout is never defined by containing controls (there is nothing working like VerticalLayout="Stretch" for a StackPanel). It will always take the space neccessary for it's contained controls to fully expand.
As you only have one child in that StackPanel (which has a scrolling mechanism of it's own) remove the StackPanel.
Hope this helps.
Cheers
Jürgen

Resources