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.
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'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.
I have a ListView that takes up the entire width of the screen - I want the items to take up all available space. There will be a maximum of 4 per "screen". I will then want to put the ListView into a FlipView and take 4 items each "flip".
So far I have set the ItemsPanelTemplate to:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
</Grid>
This gives me the four columns, but puts all items into the first column. Perhaps this isn't the right method? If it is the right method, how do I set the column they should be in? Add a value to my object which equals "[Index in Collection] % 4" and set the ItemTemplate Grid.Column to this value?
This all seems a bit too complicated to do something which I imagine might be quite a bit more simple - is it?
Please refer to the following article,
http://www.scottlogic.co.uk/blog/colin/2010/11/using-a-grid-as-the-panel-for-an-itemscontrol/
I am developing a Silverlight web app and am working now on a child window which is separated in three columns. The left is for messages which will not be displayed always, and two (middle and right) which will be displayed always.
My question is: How can I make the right and middle column use up all the space if the left column doesnt need to show any data? So if for example my child window is 100 in width every of the three should be 33.333 or if the left one doesn't need to be displayed then the other two are both 50. Is there any way without messing in code behind?
Edit: The child window looks like this
<controls:ChildWindow ...
<Grid x:Name="LayoutRoot" Margin="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid Name="msgGrid" Grid.Column = 0/>
<Grid Grid.Column = 1/>
<Grid Grid.Column = 2/>
</controls:ChildWindow>
I am passing a bool value (showMessageToUser) into the constructor of the child window and based on that it should be determined what to do
Make the first column "Auto" size and the second two columns 1* (or just *) in width.
The first column will collapse to its contents (which presumably you will show/hide) and the second two will take up 50% each as the * sizing is just a ratio.
Put a name container (another grid?) in the first column and control its visible flag. The other 2 columns will take care of themselves.
<controls:ChildWindow ...
<Grid x:Name="LayoutRoot" Margin="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid x:Name="msgGrid1" Grid.Column=0 Width="100"/>
<Grid Grid.Column=1/>
<Grid Grid.Column=2/>
</controls:ChildWindow>
Control the visibility of msGrid1 to get the effect you wanted. If you also want user control of the the width if column 0 (e.g. with a GridSplitter) you will need code-behind as the two features do not work together.