I am using a textblock to display the product description under the product's image. The text must be fixed 100px wide but the height can grow up to 30px tall. If the text still can't fit, it must display ellipsis. Here is my xaml:
<StackPanel>
<!-- I use canvas here to reserve some space for animation (grow/shrink) -->
<Canvas Height="75" Width="75">
<Image x:Name="picture" Height="64" Width="64" .../>
<Canvas/>
<TextBlock Width="100" MaxHeight="30"
TextTrimming="CharacterEllipsis" TextWrapping="Wrap"
Text="{Binding Path=ProductDescription}"
HorizontalAlignment="Center" VerticalAlignment="Top" TextAlignment="Center">
</StackPanel>
The description can have multiple lines. For eg, "Wireless Mouse\nQuantity:20". It looks ok on XP but on Windows 7 only the first line shows up and there's no ellipsis. Can anyone spot the problem in my xaml?
There are several errors in your example: should , ".../>" isn't valid XAML and your TextBlock doesn't have a closing tag.
The follow XAML worked fine on for me on Windows 7:
<StackPanel>
<!-- I use canvas here to reserve some space for animation (grow/shrink) -->
<Canvas Height="75" Width="75">
<Image x:Name="picture" Height="64" Width="64" />
</Canvas>
<TextBlock Width="100" MaxHeight="30"
TextTrimming="CharacterEllipsis" TextWrapping="Wrap"
Text="I use canvas here to reserve some space for animation (grow/shrink)"
HorizontalAlignment="Center"
VerticalAlignment="Top"
TextAlignment="Center" />
</StackPanel>
Depending on the font size MaxHeight of 30 is almost just one line of text, so the textblock can't grow in height. Change it or remove it completely.
Related
I have this code on which I use a DockPanel on a Button.Content. However it doesn't let me right align the last image (small arrow).
<Button Height="70"
HorizontalContentAlignment="Left">
<Button.Content>
<DockPanel LastChildFill="False">
<Image DockPanel.Dock="Left"
Height="50"
Width="50"
Source="{StaticResource Placeholder}"
Stretch="UniformToFill"
Margin="5" />
<TextBlock DockPanel.Dock="Left"
Text="Dummy text"
VerticalAlignment="Center"
Margin="5" />
<Image DockPanel.Dock="Right"
Height="24"
Width="24"
Source="{StaticResource Right_Arrow_24}"
VerticalAlignment="Center"
HorizontalAlignment="Right"
Stretch="UniformToFill"
Margin="5" />
</DockPanel>
</Button.Content>
</Button>
It now gives me this:
So the right small arrow should be placed on the right of the button and not just after the TextBlock.
I've found some similar issues and it looks like I did it correct, but somehow it isn't..
What am I doing wrong here?
Try to set the HorizontalContentAlignment of your button to "Stretch". Otherwise your DockPanel will use the size need by its content, then align left. You can confirm this behaviour by using different text lengths for your TextBlocks
You simply have to append an extra child to the DockPanel (say an empty Canvas) without the DockPanel.Dock attribute, so that all the remaining space is assigned to it.
In general, DockPanel only works fine only when its last child has no Dock constraint
Try setting
HorizontalContentAlignment="Stretch"
On your button.
This is the link for the screenshot of my page (Sorry I can't upload it directly because my reputation is not enough)
page
Problem in number:
1: If I scroll it up it will override my notes background so it will not look good. How I can limit the showing text to only in notes background and if I scroll it up, the text in the upper side will be vanished?
2: If I have more text in bottom side, it will cut my text. So it doesn't showing all of my text.
This is my xaml
<StackPanel x:Name="ContentPanel" Grid.Row="1" Margin="14,0,10,0">
<ScrollViewer x:Name="textScroller" Grid.Row="2">
<StackPanel x:Name="Resep" HorizontalAlignment="Center" Margin="0,40,0,0" Height="Auto" VerticalAlignment="Center" Width="362">
<TextBlock Text="{Binding LineTwo}" Foreground="Black" Height="393" MaxWidth="362" TextWrapping="Wrap" Margin="20,30,1,0"/>
</StackPanel>
</ScrollViewer>
</StackPanel>
</Grid>
You need to add the Height and Width attributes to your ScrollViewer.
Here is the XAML sample:
<StackPanel Orientation="Horizontal" >
<TextBlock VerticalAlignment="Bottom" Text="Text1" FontSize="20" />
<Image VerticalAlignment="Bottom" ... />
<TextBlock VerticalAlignment="Bottom" Text="Text2" />
</StackPanel>
The result is that the textblocks have different bottom-margins depending on their FontSizes, but I need them all to be on one bottom line with no margins. How to get it? In my case I cant use TextBlock + Runs.
Forget several blobks : the bottom position dépends of the font size.
But, in a single paragraph, write the flow of your objects
You should use something like this :
<RichTextBlock>
<Paragraph>
<Span FontSize="148">Hello</Span>
<InlineUIContainer>
<Image Source="Assets/Logo.png"></Image>
</InlineUIContainer>
<Span FontSize="36">again</Span>
</Paragraph>
</RichTextBlock>
I'm trying position two labels, one right next to the other (with a small amount of spacing).
e.g.
Label 1 Label 2
the content of each label will always be different, most often Label 2 will have more characters but I want the content to scale as the window is resized and I want the font sizes in Label 1 and Label 2 to remain consistent.
I don't care if the contents of Label 2 are cropped if too long.
I've tried using a grid with two columns and placed the Label inside a ViewBox:
<Viewbox Margin="0,0,0,0" VerticalAlignment="Top" HorizontalAlignment="Left">
<Label Margin="0,0,0,0" Content="{Binding Path=Suburb}"/>
</Viewbox>
Problem with this is, the positioning is never right and the font sizes don't remain consistent.
What is the best layout method to achieve this? Can I synchronise the font sizes through binding? I've tried binding Label 2's FontSize property to Label 1's FontSize but that doesn't work as it just returns 12 every time no matter how big/small the font really is (I'm presuming the actual FontSize isn't being calculated because the Label is inside a ViewBox).
Any suggestions?
Thanks
You can use the following approach:
<Viewbox VerticalAlignment="Top">
<DockPanel>
<TextBlock Text="Second" DockPanel.Dock="Right" />
<TextBlock Text="First" />
</DockPanel>
</Viewbox>
Note that the second label would never get cropped since the Viewbox would allow the content to render to any size and then scale it. You can specify MaxWidth on the second TextBlock which would limit its size in pixels.
Instead of a DockPanel you can use a Grid with different ColumnDefinitions to achieve the same effect.
The important thing is that they're all in the same Viewbox (which, consequently, doesn't synchronize the FontSize but performs a visual scaling of everything it contains).
The following markup seems to be ok:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Viewbox>
<Label Content="Label 1" Width="{Binding ActualWidth, ElementName=label2}"/>
</Viewbox>
<Viewbox Grid.Column="1">
<Label Name="label2" Content="Label 2 Label 2 Label 2"/>
</Viewbox>
</Grid>
Im not 100% sure of what 'content scale as the window resizes' and 'font sizes remain consistent' actuall means, but I guess you want each label to trim depending on available space.
So why not use TextBlock as below
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding Path=Suburb}" TextWrapping="NoWrap" TextTrimming="CharacterEllipsis" Margin="0,0,5,0" />
<TextBlock Text="{Binding Path=Area}" TextWrapping="NoWrap" TextTrimming="CharacterEllipsis" Grid.Column="1"/>
</Grid>
I realize this question is old, but one of the more correct ways to do this is to use Runs.
Runs are sections of text within a TextBlock.
<TextBlock Margin="0,0,0,0" VerticalAlignment="Top" HorizontalAlignment="Left">
<Run Text="{Binding Suburb}" />
<Run Text="{Binding Area}" />
</TextBlock>
Keep in mind that everything within a TextBlock is whitespace-sensitive, so if you wanted to have two Runs back-to-back without any space in between, you would do something like this:
<TextBlock Margin="0,0,0,0" VerticalAlignment="Top" HorizontalAlignment="Left">
<Run Text="Foo" /><Run Text="bar" />
<!-- Prints 'Foobar' -->
</TextBlock>
It's similar to how HTML is rendered, if there is whitespace between the tags, a single space is rendered on the page between those elements. This rule only applies to items within a TextBlock, not the entire XAML page.
I am kinda new to WPF, dont know if the question is weird. I wanted to know if its possible to add a border around the text inside a textBlock.
EDIT:
As per suggestion I have tried both but without much success:
<Border BorderBrush="#FF0B232F" BorderThickness="2">
<TextBlock HorizontalAlignment="Left" Text="TextBlock" TextWrapping="Wrap" FontSize="36" FontWeight="Bold" Foreground="#FF88BCCD" OpacityMask="Black"/>
</Border>
and
<Label BorderBrush="#FF0B232F" BorderThickness="2,2,2,2" Content="TextBlock" FontSize="36" FontWeight="Bold" Foreground="#FF88BCCD" />
Am I doing something wrong here?
In such cases I use Label or TextBlock placed in Border.
Both your approaches are correct, however, if you have the textblock/label inside a grid (or any other container) declared as you have, its contents will stretch.
Try setting the VerticalAlignment and/or HorizontalAlignment to an appropriate setting (Top/Left, Center)..
something like this:
<Border BorderBrush="#FF0B232F" BorderThickness="2" VerticalAlignment="Top">
<TextBlock HorizontalAlignment="Left" Text="TextBlock" TextWrapping="Wrap" FontSize="36" FontWeight="Bold" Foreground="#FF88BCCD" OpacityMask="Black"/>
</Border>
Assuming that you are asking for a full size TextBlock with a border overlay within the bounds of the TextBlock you could wrap it in a Grid and draw the borders over the top of the TextBlock like this...
<Grid HorizontalAlignment="Left">
<TextBlock Text="TextBlock" TextWrapping="Wrap" FontSize="36" FontWeight="Bold" Foreground="#FF88BCCD" OpacityMask="Black" />
<Border BorderBrush="#FF0B232F" BorderThickness="2" />
</Grid>
Because we haven't specified the grid row and column on the TextBlock and Border objects the border overlays on top of the TextBlock.
if you just want to have a border around your textblock or any other control use :
<Border>
<TextBlock></TextBlock>
</Border>
you set border properties like color ,cornerradius ,thickness,...