I'm trying to do something very simple in Xaml but can't find the solution.
Would like to have 3 columns set this way:
Left column: contains an combobox that I want to be aligned on the left
Middle column: Contains a text from time to time. When displayed, want it to be centered in the remaining space.
Right column: Contains some Wrapping panel that I want aligned to the right.
So far I've done this:
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
The Middle column Xaml is:
<WrapPanel Grid.Column="1">
<TextBlock Name="UserInfoLogs" Text="{Binding Path=...}" />
</WrapPanel>
It aligns correctly the left and right columns' elements, but when displaying the centered text it is naturally aligned to the left of the middle column.
thanks!
You've got it, you're just missing one ingredient;
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<TextBlock Text="Left"/>
<!-- Most of the time just setting the HorizontalAlignment will suffice,
except when the TextBlock object is for whatever reason allowed to
stretch further than its contents. In which case TextAlignment will
align the Text within the Center of itself. -->
<TextBlock Grid.Column="1" Text="Center"
HorizontalAlignment="Center" TextAlignment="Center"/>
<TextBlock Grid.Column="2" Text="Right"/>
</Grid>
Hope this helps.
Related
I am creating a custom calendar in XAML and WPF. The calendar is made up of seven <Grid> columns that can auto expand (e.g. width="1*") with the window.
Here's what's happening right now:
A very wide element "takes over" the columns and makes the others smaller, which is not what I want.
I want it to look like this:
In this example, the columns auto-expand to fill available width (window size) but an element can't make one column larger. The only way I know to achieve this is by setting the width property (but then it wouldn't auto-expand).
Here's sample code. It would produce output like the first image:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="1*"/>
</Grid.ColumnDefinitions>
<TextBlock Text="Hello world this is a sample very long text!" Grid.Column="1"/>
<TextBlock Text="Hello world !" Grid.Column="2"/>
</Grid>
How can I achieve this desired output?
Edit: I was using a ScrollViewer around my grid (to vertically scroll in case there were many assignments). The property HorizontalScrollBarVisibility="Hidden" actually caused this strange behavior.
I am not sure its the solution for your problem, but you can try to wrap the text if overflows, like this:
<TextBlock Text="Some long text" TextWrapping="Wrap">
Let me know if this helps, if not i can look more into it!
I'm not seeing that behavior. When I try your code snippet, the text doesn't "take over" the other columns. It gets clipped (see below)
Sample without TextWrapping
Seems like you might want to set the TextWrapping attribute of TextBlock to "Wrap".
<TextBlock Text="Hello world this is a sample very long text!" Grid.Column="1" TextWrapping="Wrap"/>
Sample with TextWrapping="Wrap"
I'm working on a WPF Application, and i encountered the following problem,
ignored it until now though.
I want to display a Listbox and a Label on top of it.
For that I have the following XAML code:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Label Grid.Column="1" Content="Packs" Margin="60, 65, 60, 0"/>
<ListBox Grid.Column="1" Height="200" Width="150"/>
</Grid>
This gives the following output in the design window
You can ignore the buttons on the left.
As you can see the Label is right on top of the Listbox.
Now when I open my program, the window makes it seem like the Listbox is on top
of the Label.
I tried a lot rearranging the XAML-Code to display it differently, but this problem stay the same, and although I could bypass it by using values that are simply too big for the designer, it still bugs me that I can't find a solution.
Also please keep in mind that my program will not be resizeable, so dont worry about that.
Thank you for your answers!
You can put Label and ListBox in another Panel (StackPanel) and align that Panel in outer Grid:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="1"
Width="150"
VerticalAlignment="Center"
HorizontalAlignment="Center">
<Label Content="Packs"/>
<ListBox Height="200"/>
</StackPanel>
</Grid>
this way both elements will be in the center of middle column even if window is resized.
I have a ListView:
<ListView>
<ListView.ItemTemplate>
<DataTemplate>
<Grid Height="90" HorizontalAlignment="Stretch" Background="Gray">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="1.2*"/>
<ColumnDefinition x:Name="changeThis" Width="140"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="45"/>
</Grid.ColumnDefinitions>
...
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
When the screen orientation changes to Portrait I would like the 3rd (140px wide) column to disappear, so the other columns stay properly visible. I use VisualStateManager to manage the orientation change, but I get an exception if I try to change the "changeThis" ColumnDefinition to 0. And strangely I cannot access "changeThis" ColumnDefinition from the code behind. It is a Windows Store App.
Sadly, the x:Name is local to the item template and cannot be accessed from outside.
Possible Solutions are:
1: Bind the Width to a Property.
{Binding DataContext.MyColumnWidth, ElementName=LayoutRoot}
2: Use an ItemTemplateSelector with different Templates for Orientations.
I have the following grid using WPF and a few third party controls (Telerik):
<Grid x:Name="grid2" Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" MinWidth="150"/>
<ColumnDefinition Width="5"/>
<ColumnDefinition Width="*" MinWidth='80'/>
</Grid.ColumnDefinitions>
<Grid Grid.Column="0">
<Grid.RowDefinitions>
<RowDefinition Height="26"/>
<RowDefinition/>
</Grid.RowDefinitions>
<telerik:RadBreadcrumb Grid.ColumnSpan="3" Header="RadBreadcrumb"/>
<telerik:RadTreeView Grid.Row="1"/>
</Grid>
<GridSplitter Grid.Column="1" HorizontalAlignment="Center" Width="5" Height="auto"/>
<telerik:RadTransitionControl x:Name="Trans" Grid.Column="2" Width="auto"/>
</Grid>
Currently I am trying to make it so that the grid in column 0 (on the left side) will not re-size while re-sizing the window. I was able to achieve this effect by setting the width of column "0" to either a static 150 or auto. However, when I did this, the grid splitter no longer respected the minimum width of column 2 and allowed it to drag off the screen. By setting both column 0 and 2 to a width of star (the way I have it in the code now) the min widths are respected (the columns can't shrink past the 150 and 80 defined) but they don't re-size properly (the left column re-sizes in proportion to the right column). I would like to somehow get both the resize and the gridsplitter to work at the same time. Let me know if I wasn't clear enough or if more input is needed.
So, this isn't exactly what I was looking for, but it's doing the job for me:
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto" MinWidth="150" MaxWidth="1000"/>
<ColumnDefinition Width="5"/>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
I set the MaxWidth of my left hand column so that you could no longer drag the splitter past the point of no return on the right side. This solution also allows me to set the first column's width to auto (which makes the re-sizing work the way I intended as well). Unless you have a monitor smaller than 1000px wide (which in the environment I'm working in won't happen) this solution will work just using XAML. Again, I'm a little disappointed with this solution but its at least working in a simplistic manner.
I have problem with 2 Textblocks in my WP7 project (in expression blend).
I put them [text block][text block] in a grid, and the problem is that text of 1st text block is random, once got 5 char, once 10 char, and first text block is on second text block.
example:
[First Text][Second Text]
[First Text Dadada] Text]
I would like to make them:
[First Text][Second Text]
[First Text Dadadda][Second Text]
Put each textbox in its own column of the grid (Grid.Column="..." attribute to specify that) or wrap them into a StackPanel specifying Orientation=Horizontal
Your grid should be automatically resizable and both textBlocks should be assigned their respective columns.
Example, consider the following grid layout for your problem:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
</Grid>
Now, assign columns to your textBlocks (declared inside the grid), e.g:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0"/>
<TextBlock Grid.Column="1"/>
</Grid>
That should do it.