Develop Reference

Long text in tooltip is not fully shown in UWP

I've defined a for a listbox item, and binded the text inside the tooltip to two properties of the object (name + description) but i have an issue that the text is being cut off
here is my tooltip:
<ToolTipService.ToolTip>
<StackPanel >
<StackPanel Orientation="Vertical">
<TextBlock FontSize="13">
<Bold>Name</Bold>
</TextBlock>
<TextBlock Text="{x:Bind name}"/>
</StackPanel>
<StackPanel Orientation="Vertical">
<TextBlock FontSize="13" TextWrapping="Wrap">
<Bold>Description</Bold>
</TextBlock>
<TextBlock Text="{x:Bind description}"/>
</StackPanel>
</StackPanel>
</ToolTipService.ToolTip>
Now the thing is, if i bind the tooltip to a method that returns the name + description (Which is how it was previously, but was super ugly) it does show all the text, it was like this:
<ToolTipService.ToolTip>
<TextBlock Text="{x:Bind Description}"/>
</ToolTipService.ToolTip>
But I needed to style it to make it look better, so i've tried to do what was posted above.
I've already tried setting the Width/Height to super large values, didn't do anything.
any ideas?

The tooltip template probably has a default maximum width, which cuts off the TextBlock. To solve this, just add TextWrapping attribute:
<TextBlock TextWrapping="Wrap" Text="{x:Bind description}"/>
Now the tooltip text will wrap on multiple lines as necessary

TextTrimming TextBlock with other controls next to it

I'm trying to make a really simple title panel, which contains an Image-icon and TextBlock-title in the center of the panel:
To achieve this with TextBlock, I could use StackPanel with Vertical-orientation. But this doesn't work when I need to add the Image in front of TextBlock.
This is the current code, which doesn't work with the TextTrimming:
<StackPanel Orientation="Horizontal">
<Image
Height="28"
Width="28"
Margin="0,0,10,0"
Source="/Resources/Images/Icons/MyIcon.png"
HorizontalAlignment="Left"
VerticalAlignment="Center"/>
<TextBlock x:Name="TitleText"
Text="Test text test text Test asd asd "
VerticalAlignment="Center"
FontSize="28"
TextWrapping="NoWrap"
TextTrimming="WordEllipsis"/>
</StackPanel>
Another solution could be to control the Width of the TextBlock in code, but I'd like to achieve this within XAML. Any ideas?

Changing the Font of the string attached to the Bindings in WPF

Here is the XAML
<ListView x:Name="duplicateVarsInDepXMLListView" ItemsSource="{Binding}" HorizontalAlignment="Left" Height="100" Margin="362,360,0,0" VerticalAlignment="Top" Width="306">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel>
<TextBlock Text="{Binding Name, StringFormat='Variable Name: {0}'}"/>
<TextBlock Text="{Binding Value,StringFormat='Value: {0}'}"/>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
This xaml displays a List of collection with Variables Names and the values of a collection. We have something like Foreground property to change the colour of the binding characters or FontWeight to make it Bold.
However i only want to Change the font of the Label e.g. VariableName and not to the actual binding.
Is this possible to achieve? Any suggestions

You can use Run elements inside a TextBlock and apply different formatting to different runs. You can bind to the FontFamily property of the Run to dynamically set the font:
<TextBlock>
<Run Text="Variable Name: " FontFamily="{Binding FontName}"/>
<Run Text="{Binding Name}"/>
</TextBlock>
If the text in the TextBlock is wrapped using TextWrapping="Wrap" the runs will wrap around as expected. This does not apply to the question but can make using Run elements superior to stacking TextBlock elements in a StackPanel.

Extract out seperate TextBlock and set FontFamily on that TextBlock. Wrap both TextBlocks in StackPanel and set the orientation to Horizontal -
<StackPanel>
<StackPanel Orientation="Horizontal">
<TextBlock Text="Variable Name: " FontFamily="Comic Sans MS"/>
<TextBlock Text="{Binding Name}"/>
</StackPanel>
<TextBlock Text="{Binding Value,StringFormat='Value: {0}'}"/>
</StackPanel>

You could do something like:
<StackPanel Orientation=Horizontal>
<TextBlock Text="Variable Name: "/>
<TextBlock Text={Binding Name} FontWeight="Bold"/>
</StackPanel>

Insert Hyperlink in TextBlock

In a WPF application I load news from an RSS feed. The contents are displayed in a TextBlock. This TextBlock has a certain size. Contents are cut off by the TextTrimming method.
Now I would like at the end of each TextBlock to insert a hyperlink button. The only problem is I do not know exactly what position will be cut on my string. Is there a way to figure this out?
When I insert my Text in my TextBlock and then my Hyperlink-Button, my HyperlinkButton will be cut of. Can I prevent to cut off my HyperlinkButton?
XAML-Code:
<TextBlock Name="myText" />
C#-Code:
Hyperlink hlink = new Hyperlink(new Run("here"));
myText.Inlines.Clear();
myText.Inlines.Add(value); //description from RSS Feed
myText.Inlines.Add(hlink);

Why not just add the HyperLink after the text, by replacing both items in a StackPanel?

If I understood your requirements this is one way to achieve your goals:
<StackPanel>
<DockPanel Width="200">
<TextBlock DockPanel.Dock="Left" Text="A short description." TextTrimming="CharacterEllipsis"/>
<TextBlock DockPanel.Dock="Right" TextAlignment="Right">
<Hyperlink NavigateUri="http://www.google.com">here</Hyperlink>
</TextBlock>
</DockPanel>
<DockPanel Width="200">
<TextBlock DockPanel.Dock="Left" TextTrimming="CharacterEllipsis" MaxWidth="170" Text="A really long descripion of the item." />
<TextBlock DockPanel.Dock="Right" TextAlignment="Right">
<Hyperlink NavigateUri="http://www.google.com">here</Hyperlink>
</TextBlock>
</DockPanel>
</StackPanel>
So the DockPanel control might be a good candidate to consider.

Slightly more convenient is to use a :
<TextBlock>
<Run Text="Short description"/>
<Hyperlink NavigateUri="http://www.google.com">here</Hyperlink>
</TextBlock>

Listbox extending off the page

I have a listbox inside of a stack panel inside of a border in a silverlight application and when ever I add anything to the listbox it increases in height so the scrollbar is never used and it extends beyond the boundaries of the border element. I have tried explicitly setting the height attribute of the listbox, the border and the stack panel and it still goes beyond this.
Here is my code:
<Border x:Name="articlePane">
<StackPanel>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Top">
<Button Content="Latest" MouseEnter="HandleRollInAnimation" MouseLeave="HandleRollOutAnimation" />
<Button Content="Pending" MouseEnter="HandleRollInAnimation" MouseLeave="HandleRollOutAnimation" />
<Button Content="Done" MouseEnter="HandleRollInAnimation" MouseLeave="HandleRollOutAnimation" />
</StackPanel>
<ListBox x:Name="articleList" Margin="5" Background="Transparent" ItemsSource="{Binding}"
ScrollViewer.VerticalScrollBarVisibility="Visible">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical" VerticalAlignment="Top" HorizontalAlignment="Center">
<Image x:Name="articleImage" />
<TextBlock x:Name="articleTitle" Text="{Binding Path=Title}" FontSize="18" FontWeight="Bold"
Margin="5"/>
<TextBlock x:Name="articleDate" Text="{Binding Path=Date}" FontSize="14" Foreground="Gray"
Margin="5"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
</Border>

I have a feeling that the StackPanel just keeps on adding height forever. I think in this instance you'd be better off with a Grid layout within your Border. Put the Button StackPanel in one height defined row, and the ListBox in an autosizing * height row. This way Grid will stick within the confines of your form.