I have the following XAML which is meant to show an Image and two TextBlocks on top of eachother beside it:
<StackPanel Orientation="Horizontal" >
<Image Source="{Binding CoverArt}" Height="150" />
<StackPanel Orientation="Vertical">
<StackPanel>
<TextBlock FontSize="30" Text="{Binding Title}" TextWrapping="Wrap" />
</StackPanel>
<Grid Width="auto">
<TextBlock FontSize="22" Text="{Binding Summary}" TextWrapping="Wrap" />
</Grid>
</StackPanel>
</StackPanel>
My problem is getting the text to wrap. I've tried using a Grid and assigning the columns' width but it didn't work. Neither did setting the width values to auto. The only thing that works is hard-coding the width, but I do not want that. Thanks.
A Stackpanel will stretch to the size of its content, so it's not what I would use. Use a grid, as explained in the following posts:
TextBlock TextWrapping not wrapping inside StackPanel
Text in StackPanel doesn't wrap (wp7)
TextBlock inside stackpanel does not wrap text
A quick comparison:
Before with stackpanel
After with one grid (You might want to rearrange the elements a bit)
The code for the last segment:
<pre>
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Ellipse Fill="red" Width="150" Height="150" />
<StackPanel Grid.Column="1" Orientation="Vertical">
<StackPanel>
<TextBlock FontSize="30" Text="basdljhba dnaiks d., kasndca casn oiäc cas lkcnaso ca dxjwöbdq wkjöbdqw dkjwqb " TextWrapping="Wrap" />
</StackPanel>
<Grid Width="auto">
<TextBlock FontSize="22" Text="dewdewdewdewdewewd" TextWrapping="Wrap" />
</Grid>
</StackPanel>
</Grid>
Did you try setting the width of the columns to fractions instead? width="2*" That will give you some boundaries without a pixel set size. Some way or another you need to set a constraint for the container. If you have two columns and no size is set they will get 50% each. 2* will make give that column 2/3 of the total column with, see example below.
Related
I have a stackpanel with a fixed width.
Within the stackpanel, I have two horizontally aligned elements: a textblock and a textbox.
Is it possible to align these two elements, such they appear side-by-side, but centered within the stackpanel?
Here is my code so far:
<StackPanel Orientation="Horizontal" Width="17cm">
<TextBlock Text="Invoice Nr:"/>
<TextBox Width="2cm" />
</StackPanel>
With StackPanel it would be difficult to achieve, but with Grid it can be done by setting HorizontalAlignment and Grid.Column on the children like below:
<Grid Width="17cm" >
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<TextBlock HorizontalAlignment="Right" Text="Invoice Nr:"/>
<TextBox Grid.Column="1" HorizontalAlignment="Left" Width="2cm" />
</Grid>
You could probably put the two controls within another container, and then center that container horizontally. Something like this:
<StackPanel Orientation="Horizontal" Width="17cm">
<StackPanel HorizontalAlignment="Center">
<TextBlock Text="Invoice Nr:"/>
<TextBox Width="2cm" />
</StackPanel>
</StackPanel>
I am trying to fit Textblock and a button in DataGrid Cell. The Textblock holds a portion of my text and when I click the button a dialog is display. I general my code looks like the one below
<DataGridTemplateColumn Header="Message" Width="Auto" MinWidth="60">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<StackPanel Orientetion="Horrizontal">
<TextBlock MinWidth="200" TextTrimming="CharacterEllipsis" Text="{Binding Text}" />
<Button DockPanel.Dock="Right" Width="90" Margin="1" />
</StackPanel>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
I want the Button to be always at righter side of the cell and its width to be fixed. The TextBlock needs to be variable, for example when I resize the window, and so the DataGrid, the TextBlock should stretch also.
The problem is that, I can not achieve this behaviour / view. The TextBlock varies on each DataGrid line and in some case the button is not at the righter of the cell.
I tried to change the StackPanel to Grid or DockPanel but still I can not get the desirable result.
Using Grid
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition MinWidth="100" Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" TextTrimming="CharacterEllipsis" Text="{Binding Text}" />
<Button Grid.Column="1" Margin="1" />
</Grid>
Any thoughts to share?
StackPanel doesn't really have the concept of aligning to the right. It stacks the elements as close as it can. You can get around this in different ways but in this case, use a DockPanel instead:
<DockPanel>
<Button DockPanel.Dock="Right" Width="90" Margin="1" />
<TextBlock MinWidth="200" TextTrimming="CharacterEllipsis" Text="{Binding Text}" />
</DockPanel>
Note that I moved the TextBlock to be the last child element of the DockPanel. DockPanel, after laying out the other child elements, allocates the remaining space to the last child element (unless you specify LastChildFill=false). In this case, we want the TextBlock to take up the remaining space.
UPDATE: based on the comments above, in addition to changing the panel type to a DockPanel (or Grid), you can use DataGridTemplateColumn.Width to a fixed value instead of Auto. This would make the column load with the specified with but the user can still modify the column with if they want to:
<DataGridTemplateColumn Header="Message" Width="60" MinWidth="60">
I'd set a static value to the DataGridTemplateColumn.Width--it can help with rendering performance. Set the size on your buttons too, so it doesn't size to fit text.
This works for me (I used the border for visualization purposes):
<Window ...
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<DataTemplate DataType="{x:Type local:Model}"
x:Key="VmItem">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Border BorderBrush="Black" BorderThickness="1">
<TextBlock Grid.Column="0" TextTrimming="CharacterEllipsis" Text="{Binding Original}" />
</Border>
<Button Grid.Column="1" Margin="1" Content="{Binding Encoded}" MinWidth="90" MaxWidth="90"/>
</Grid>
</DataTemplate>
</Window.Resources>
<Grid>
<DataGrid ItemsSource="{Binding Items}" AutoGenerateColumns="False">
<DataGrid.Columns>
<DataGridTemplateColumn Header="Message" CellTemplate="{StaticResource VmItem}" Width="300" MinWidth="100"/>
</DataGrid.Columns>
</DataGrid>
</Grid>
</Window>
Proof:
I have this very simple ChildWindow:
<Grid x:Name="LayoutRoot" Margin="2">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Button x:Name="CancelButton" Content="Cancel" Click="CancelButton_Click" Width="75" Height="23" HorizontalAlignment="Right" Margin="0,12,0,0" Grid.Row="1" />
<Button x:Name="OKButton" Content="OK" Click="OKButton_Click" Width="75" Height="23" HorizontalAlignment="Right" Margin="0,12,79,0" Grid.Row="1" />
<ScrollViewer Width="378">
<StackPanel>
<TextBlock x:Name="txtFracture" HorizontalAlignment="Left" Margin="10,10,10,10" TextWrapping="Wrap" VerticalAlignment="Top" Width="358"/>
</StackPanel>
</ScrollViewer>
</Grid>
My problem is that the text in the TextBlock is getting clipped on the right side. (I originally didn't have the StackPanel in there - that was just an experiment.) I have added more and more to the Margin.Right, but it doesn't help. The Scroll bar itself isn't stepping on the text, the text just drops a bunch of pixels as it gets to the right of the block. Sometimes, it isn't even whole letters that are getting clipped. See anything?
Also, if I change the HorizontalAlignment from Left to Center, I get the pixel-clipping on both sides of the block.
Also, if I remove the ScrollViewer altogether, the clipping is still there, so it isn't his fault, either.
I notice you have texblock width as constant and you need margin of 10 on all side. In this case ScrollViewer ScrollBar clips your TextBlock.
Possible solution is
1. Remove width on textblock and set alignment stretch.
try this
<ScrollViewer Width="378" HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Auto">
<TextBlock x:Name="txtFracture" HorizontalAlignment="Stretch" Margin="10,10,10,10" TextWrapping="Wrap" VerticalAlignment="Stretch"
Text="Testing"/>
</ScrollViewer>
Turns out that this works:
<ScrollViewer Width="378" >
<StackPanel>
<TextBlock x:Name="txtFracture" Margin="10,10,10,10" TextWrapping="Wrap" />
</StackPanel>
</ScrollViewer>
As far as I can tell, the actual culprit was the explicitly set TextBlock Width.
Here's an image of what I'm trying to achieve within a grid view column:
The text is wrapping as expected and the closing double-quote image is displayed correctly. But if I reduce the column width fractionally I get this:
Notice how the closing double-quote image is being clipped.
The essence of the XAML I'm using is shown below, although it is merely the latest variant in a set of equally inadequate attempts.
<DockPanel LastChildFill="False" MinWidth="50">
<ContentControl
Content="{StaticResource DoubleQuotesOpenImage}"
VerticalAlignment="Top"
MinWidth="16"
DockPanel.Dock="Left" />
<TextBlock
FontSize="13"
TextWrapping="Wrap"
Text="{Binding TextRepresentation}"
VerticalAlignment="Center"
DockPanel.Dock="Left" />
<ContentControl
Content="{StaticResource DoubleQuotesCloseImage}"
MinWidth="16"
VerticalAlignment="Bottom"
HorizontalAlignment="Left"
DockPanel.Dock="Left" />
</DockPanel>
So the question is this: how can I ensure that both (a) the text block wraps in accordance with column width changes, and (b) the closing double-quote symbol is never clipped?
UPDATE
There's one key thing I should have included: the closing double-quote should be flush with the right-hand edge of the TextBlock. It is not acceptable to have the quote image permanently aligned with the right edge of the column.
You could replace the DockPanel with a Grid with 3 columns in a StackPanel:
<Grid HorizontalAlignment="Left">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<ContentControl
Content="{StaticResource DoubleQuotesOpenImage}"
VerticalAlignment="Top"
Grid.Column="0" />
<TextBlock
FontSize="13"
TextWrapping="Wrap"
Text="{Binding TextRepresentation}"
Grid.Column="1" />
<ContentControl
Content="{StaticResource DoubleQuotesCloseImage}"
VerticalAlignment="Bottom"
Grid.Column="2" />
</Grid>
The Width="Auto" setting ensures that the first and third column have the width of the contained element, the middle column would get the rest of the total width.
Reverse the order that you are adding items to your DockPanel so that the last item added is your TextBlock. Then remove the LastChildFill property, and set DockPanel.Dock of your closing quote to Right
<StackPanel>
<DockPanel MinWidth="50">
<ContentControl
Content="{StaticResource DoubleQuotesOpenImage}"
VerticalAlignment="Top"
MinWidth="16"
DockPanel.Dock="Left" />
<ContentControl
Content="{StaticResource DoubleQuotesCloseImage}"
MinWidth="16"
VerticalAlignment="Bottom"
HorizontalAlignment="Left"
DockPanel.Dock="Right" />
<TextBlock
FontSize="13"
TextWrapping="Wrap"
Text="{Binding TextRepresentation}"
VerticalAlignment="Center"
DockPanel.Dock="Left" />
</DockPanel>
</StackPanel>
This will make it so the quotes are positioned first, then your Text will take up all remaining space
You could also use a Grid like Clemens' suggested, although I presonally prefer to use a DockPanel because I hate writing column definitions :)
I have a ListBox that contains TextBlocks.
Sometimes the content of a TextBlock is too long and I want the height of this entry to double or triple as needed to accommodate the text.
I tried TextWrapping="Wrap" but it doesn't work. Every TextBlock is still just one line in height.
Is there an easy way to fix the problem in XAML? Thanks.
* Additional info: I tried to simplify the question but perhaps the complete scenario is better.
I have a listbox whose entries are displayed according to a template in code below.
Each entry has 2 pieces of info: a product price followed by product name.
I don't want to use the horizontal scrollbar in the listbox and want the product name to be displayed in 2 or more lines if necessary. The product name is the 2nd TextBlock.
Here's my XAML:
<ListBox Name="listBox1" ItemsSource="{Binding}" Margin="10" ScrollViewer.HorizontalScrollBarVisibility="Disabled">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock MinWidth="40" TextAlignment="Right" Text = "{Binding ProductPrice}" />
<TextBlock Text = "{Binding ProductName}" TextWrapping="Wrap" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Disable the listbox horizontal scrollViewer. This way the textBlock will be forced to wrap.
XAML:
<ListBox ScrollViewer.HorizontalScrollBarVisibility="Disabled">
<TextBlock TextWrapping="Wrap"/>
</ListBox>
Example result:
Edit:
From the XAML you added I'm confident that the problem lays in the StackPanel.
Try replacing it with Grid for example:
<ListBox Name="listBox1" ItemsSource="{Binding}" Margin="10" ScrollViewer.HorizontalScrollBarVisibility="Disabled">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock MinWidth="40" TextAlignment="Right" Text = "{Binding ProductPrice}" />
<TextBlock Grid.Column="1" Text = "{Binding ProductName}" TextWrapping="Wrap" />
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
StackPanel doesn't limit the content size, therefore the textBlock doesn't knows where the space ends , and the wrapping doesn't happens.
You are using StackPanel. Try using DockPanel:
<DockPanel>
<TextBlock DockPanel.Dock="Left" MinWidth ="40" TextAlignment="Right" Text = "11.12" />
<TextBlock Text = "{Binding LongText}" DockPanel.Dock="Right" TextWrapping="Wrap" />
</DockPanel>
For Example:
this will help you do that. Dont Size the TextBlock just size the scroll viewer because texblock needs to be variable so ScrollViewer will apply Scrollbar once it goes beyond the size of ScrollViewer .
<ScrollViewer HorizontalScrollBarVisibility="Auto"
VerticalScrollBarVisibility="Auto">
<TextBlock/>
</ScrollViewer>
For ListBoxItem
<ListBox ScrollViewer.HorizontalScrollBarVisibility="Disabled">
<ListBox.Items>
<TextBlock Text="{Binding LongText}" TextWrapping="Wrap"/>
</ListBox.Items>
</ListBox>