Adjust TextBlock on a Button within a Grid - wpf

I have two buttons on a grid. On the right button there should be some text shown left aligned and another text right aligned. In all my tries so far the two strings are positioned in the center of the button and not left and right.
Once this is solved I need some space between the text and the left/right borders of the button.
Who can help?
My XAML-code so far to start:
<UserControl x:Class="MyNamespace.MyClass"
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="300" d:DesignWidth="900">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="3*"/>
<ColumnDefinition Width="1*"/>
</Grid.ColumnDefinitions>
<Button>
<TextBlock Text="left button"></TextBlock>
</Button>
<Button Grid.Column="1">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<TextBlock Text="left"></TextBlock>
<TextBlock Text="right" Grid.Column="1"></TextBlock>
</Grid>
</Button>
</Grid>
</UserControl>
DonĀ“t blame me for not putting this stuff in a ResourceDictionary. Just wanted to make the example simple.

You need to add HorizontalContentAlignment="Stretch" to Button in order for contents to take up full space. After that, to make space between text and button borders, just add two more grid columns at first and last position.
XAML:
<UserControl x:Class="MyNamespace.MyClass"
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="300" d:DesignWidth="900">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="3*"/>
<ColumnDefinition Width="1*"/>
</Grid.ColumnDefinitions>
<Button>
<TextBlock Text="left button"></TextBlock>
</Button>
<Button Grid.Column="1" HorizontalContentAlignment="Stretch">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="10"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="10"/>
</Grid.ColumnDefinitions>
<TextBlock Text="left" Grid.Column="1"></TextBlock>
<TextBlock Text="right" Grid.Column="3"></TextBlock>
</Grid>
</Button>
</Grid>

Related

Toolbar isn't showing overflow when hosted in UserControl

Hosted in a Window, I have a main UserControl composed of other UserControls.
One of these contains a ToolBar with a few Buttons on it. I place this at the top of my main UserControl by setting it's Grid.Row property to 0. However, when making the Window smaller, the Buttons just disappear and no overflow is shown. I've messed with the overflow properties a bit but no luck.
Here's the UserControl containing the ToolBar.
<UserControl x:Class="TestProj.Views.ToolBarView"
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"
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="706"/>
<ColumnDefinition Width="319"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="40"/>
<RowDefinition Height="30"/>
</Grid.RowDefinitions>
<ToolBar Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2">
<Button Content="Button1" />
<Button Content="Button2" />
<Button Content="Button3" />
<Button Content="Button4" />
<Button Content="Button5" />
<Button Content="Button6" />
</ToolBar>
</Grid>
</UserControl>
Here's my main UserControl which is hosted inside of a Window, and hosts the ToolBar UserControl:
<UserControl x:Class="TestProj.MainControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:views="clr-TestProj.Views"
mc:Ignorable="d" d:DesignHeight="737.239" d:DesignWidth="1026"
VerticalAlignment="Stretch"
HorizontalAlignment="Stretch">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="256*"/>
<ColumnDefinition Width="256*"/>
<ColumnDefinition Width="256*"/>
<ColumnDefinition Width="430*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto">
</RowDefinition>
<RowDefinition Height="608*"/>
<RowDefinition Height="Auto">
</RowDefinition>
</Grid.RowDefinitions>
<views:ToolBarView HorizontalAlignment="Left" x:Name="OnyxToolBar" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="4" />
</Grid>
</UserControl>
And here's an example .gif of me resizing the Window, just the top where the UserControl containing the ToolBar is:
The problem is your fixed sized columns in your UserControl aka ToolBarView
you can not give to some control (does not matter if it is a ToolBar or not) a fixed size value and expect to have "dynamic size"
in your situation you could do something like this
change this
<Grid.ColumnDefinitions>
<ColumnDefinition Width="706"/>
<ColumnDefinition Width="319"/>
</Grid.ColumnDefinitions>
to this (for example)
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>

Why I can't resize the last Column width by GridSplitter?

Here is the XAML:
<Window x:Class="WpfApp1.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:WpfApp1"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<Grid HorizontalAlignment="Left">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50"></ColumnDefinition>
<ColumnDefinition Width="50"></ColumnDefinition>
<ColumnDefinition Width="50"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Border Background="Red"></Border>
<GridSplitter HorizontalContentAlignment="Stretch" Width="5"></GridSplitter>
<Border Background="Green" Grid.Column="1"></Border>
<GridSplitter HorizontalContentAlignment="Stretch" Width="5" Grid.Column="1"></GridSplitter>
<Border Background="Blue" Grid.Column="2"></Border>
<GridSplitter HorizontalContentAlignment="Stretch" Width="5" Grid.Column="2"></GridSplitter>
</Grid>
</Window>
And I found that I can't resize the last Column width by the last GridSplitter.
In addition, all the other GridSplitter are working well.
Why it turns out to be this? And how can I solve this?
Thank you.
Try adding this to your Grid's RowDefinition as below (add an extra column with * as width to occupy remaining space).
<ColumnDefinition Width="*"></ColumnDefinition>
This is how your final Xaml looks like (only the content portion)
<Grid HorizontalAlignment="Left">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50"></ColumnDefinition>
<ColumnDefinition Width="50"></ColumnDefinition>
<ColumnDefinition Width="50"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Border Background="Red"></Border>
<GridSplitter HorizontalContentAlignment="Stretch" Width="5"></GridSplitter>
<Border Background="Green" Grid.Column="1"></Border>
<GridSplitter HorizontalContentAlignment="Stretch" Width="5" Grid.Column="1"></GridSplitter>
<Border Background="Blue" Grid.Column="2"></Border>
<GridSplitter HorizontalContentAlignment="Stretch" Width="5" Grid.Column="2"></GridSplitter>
</Grid>
Try and let us know if this is what you are looking for or need some other kind of help.

Resizing WPF Prism Regions

In a WPF Prism app, I have two separate views in two separate regions, say LeftRegion and RightRegion. I would like to be able to drag the edge of LeftRegion (ie. the view in LeftRegion) like a gridsplitter works. Any ideas on how to accomplish this? Thank you.
EDIT: Here is the ShellView.xaml called by bootstrapper.cs that defines the regions.
<Grid >
<Grid.RowDefinitions>
<RowDefinition Height ="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="215"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<ContentControl Grid.Column ="0" Height ="500" prism:RegionManager.RegionName="LeftRegion" />
<GridSplitter Grid.Column ="0" Width="5" HorizontalAlignment="Right" VerticalAlignment="Stretch" ResizeBehavior="CurrentAndNext"/>
<ContentControl Grid.Column="1" Height ="400" prism:RegionManager.RegionName="RightRegion" />
</Grid>
Since Prism regions are nothing but UIElements, typically ContentPresenters, you should be able to use a GridSplitter as usual:
<Window x:Class="WpfApp1.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:WpfApp2"
prism:RegionManager.RegionName="LeftRegion"
mc:Ignorable="d"
Title="MainWindow" Height="300" Width="300">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<ContentControl prism:RegionManager.RegionName="LeftRegion" />
<GridSplitter Grid.Column="1" Width="5" HorizontalAlignment="Stretch" />
<ContentControl Grid.Column="2" prism:RegionManager.RegionName="RightRegion" />
</Grid>
</Window>

Problems with Column content and GridSplitter

How can set the width of the content of the 1st 3rd or 5th columns, and still have the splitters work properly?
<Window
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:Infinity.Shell.Controls.Text;assembly=Infinity.Shell"
xmlns:dock="clr-namespace:Infinity.Shell.Controls.Docking;assembly=Infinity.Shell"
xmlns:syncfusion="http://schemas.syncfusion.com/wpf" x:Class="Infinity.MainWindow"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="499.573" Background="#FF1E1E1E">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Button Content="First" Grid.Column="0"/>
<GridSplitter Grid.Column="1" Width="5" VerticalAlignment="Stretch" HorizontalAlignment="Center"/>
<Button Content="Second" Grid.Column="2"/>
<GridSplitter Grid.Column="3" Width="5" VerticalAlignment="Stretch" HorizontalAlignment="Center"/>
<Button Grid.Column="4" Content="Third"/>
</Grid>

Binding Grid Column Width inside UserControl to parent Grid Column Width

I have a WPF Grid with two rows.
First row contains 4 columns and each column contains a Button.
Second row contains user control with colspan of 3.
The custom control contains another Grid with two columns.
I would like to set the width of the first column in UserControl's grid to the width of the second column in the MainWindow's grid.
In the example below "nested column 0"'s width should be the same as "Column 1"'s width.
I tried with ElementName but it did not work out.
Any ideas how to do it?
<Window x:Class="TestElementName.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:trace="clr-namespace:System.Diagnostics;assembly=WindowsBase"
xmlns:local="clr-namespace:TestElementName"
Title="MainWindow" Height="200" Width="600">
<Grid Tag="YeahGrid" Name="grid">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto" Tag="Hallelujah" x:Name="ColDef2"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Button Grid.Column="0" Grid.Row="0">Column 0</Button>
<Button Grid.Column="1" Grid.Row="0" MinWidth="180">Column 1</Button>
<Button Grid.Column="2" Grid.Row="0" MinWidth="115">Column 2</Button>
<Button Grid.Column="3" Grid.Row="0">Column 3</Button>
<local:ucButton Grid.Column="1" Grid.Row="1" Grid.ColumnSpan="3" BorderBrush="Red" BorderThickness="1" />
</Grid>
</Window>
User control is as follows:
<UserControl x:Class="TestElementName.ucButton"
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"
xmlns:trace="clr-namespace:System.Diagnostics;assembly=WindowsBase"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Button Grid.Column="0">nested column 0</Button>
<Button Grid.Column="1">nested column 1</Button>
</Grid>
</UserControl>
Thank you!
You can do this using a SharedSizeGroup. This allows you to link the width of designated columns in multiple Grids. (It also works for row height!)
First you need to define a SharedSizeScope on a control that encompasses all of the columns that will share widths. You can use your YeahGrid for this:
<Grid Tag="YeahGrid" Name="grid" Grid.IsSharedSizeScope="True">
Then set the SharedSizeGroup property on the columns you want to align. In the Window:
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto" Tag="Hallelujah" x:Name="ColDef2" SharedSizeGroup="HallelujahSSG" />
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
And in the UserControl:
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" SharedSizeGroup="HallelujahSSG"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
Now the widths of all Grid columns with the same SharedSizeGroup name are linked, effectively bound to the width of the column that requires the most space (in this case Column 1 in YeahGrid).
In your UserControl Xaml, you mentioned both ColumnDefinition width = "Auto". On that place please add the MinWidth attribute as per your requirements.
For your scenario you can add ---
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" MinWidth="180"/>
<ColumnDefinition Width="Auto" MinWidth="115"/>
</Grid.ColumnDefinitions>
Because you are using in mainwindow like this
<Button Grid.Column="1" Grid.Row="0" MinWidth="180">Column 1</Button>
<Button Grid.Column="2" Grid.Row="0" MinWidth="115">Column 2</Button>

Resources