How to add a button into a textblock in UWP? - xaml

I want to add a Button in a Textblock. I mean, Buttons(Objects) among Text.
The code below does not work.
<TextBlock>
<Button />
</TextBlock>
TextBlock seems to support only text, so which control should I use?

You can't display anything but text in a TextBlock. If you want to display a Button in some running text you could for example use a StackPanel:
<StackPanel Orientation="Horizontal">
<TextBlock Text="Some text with a " /><Button Content="Button" VerticalAlignment="Center" /><TextBlock Text="in it." />
</StackPanel>

Related

XAML TextBlock TextAlignment vs HorizontalAlignment

Consider the following XAML:
<Grid>
<TextBlock Text="Some Text" TextAlignment="Right" />
<TextBlock Text="Some Text" HorizontalAlignment="Right" />
</Grid>
So long as both TextBlocks are set to the same Grid.Row and Grid.Column, they will always appear in the same place - one on top of the other.
Similar concept, here - with the 2 lines of text in both the StackPanels aligning exactly:
<Grid>
<StackPanel>
<TextBlock Text="Line One" HorizontalAlignment="Right" />
<TextBlock Text="Line Two" TextAlignment="Right" />
</StackPanel>
<StackPanel>
<TextBlock Text="Line One" HorizontalAlignment="Right" />
<TextBlock Text="Line Two" TextAlignment="Right" />
</StackPanel>
</Grid>
And so on...
In terms of displaying the text to the right of the parent, the TextAlignment and HorizontalAlignment attributes are both doing the same thing - from what I can see.
Can anybody tell me what the actual difference between TextAlignment and HorizontalAlignment is, when it comes to TextBlocks?
Is there a preferred choice of the two to use?
Are there any implications to using either?
HorizontalAlignment determines the alignment of the TextBox relative to its parent.
TextAlignment determines the alignment of the text within the TextBox

Where has TextBlock Background property gone in UWP?

I need to change the Background of a TextBlock in UWP but the Background property no longer exists. What is the solution for this?
This don't work...
<TextBlock Text="Exceptions Log"
FontSize="10"
Background="Red" // This is invalid
/>
Thanks
Just put it inside a Grid or a Border or something else...
<Border Background="Red">
<TextBlock Text="Exceptions Log"
FontSize="10" />
</Border>

How to change listpicker dropdown ItemTemplate background?

I have a Windows Phone 8 listpicker that I'm trying to change the background color of, however, it only seems to change the item background and not the dropdown box background as you can see in the screen capture. The dropdown box seems to be binded to the WP8 theme. How can I change the background of the entire dropdown box and not just each individual item?
<toolkit:ListPicker x:Name="BackgroundListPicker" Background="Black" ItemsSource="{Binding BackgroundsList}">
<toolkit:ListPicker.ItemTemplate >
<DataTemplate x:Name="BackgroundItemTemplate" >
<Grid HorizontalAlignment="Stretch" Background="Black" VerticalAlignment="Stretch" Margin="0,0,0,0">
<StackPanel Orientation="Horizontal">
<Image Source="{Binding BackgroundThumb}" Width="30" Height="30" HorizontalAlignment="Left" />
<TextBlock Text="{Binding BackgroundName}" Foreground="White" Margin="12,0,0,0" HorizontalAlignment="Right"/>
</StackPanel>
</Grid>
</DataTemplate>
</toolkit:ListPicker.ItemTemplate>
</toolkit:ListPicker>
So your issue was that you were attempting to apply an image to an item. When you needed to hit the control itself that the items populate via ItemsPresenter so by pulling out the default style template for the control, and either making a place to pass in your image for an instance, or placing one directly into the template itself. You get your resulting background image for the ListPicker background to fall behind the items populating it.
Glad you found your remedy! Cheers.

Wrap text nicely in horizontal stackpanel or wrappanel?

I've seen a few other posts about this but haven't seen anything that solves my problem. Basically, I need to have some text (bold and unbold) wrap within a Stackpanel or Wrappanel nicely. Here is a visual:
I need a combination of the two TextBlocks that you see. I've got the first bold TextBlock which contains "Title: " and then on the same line I need the next TextBlock which may or may not wrap. If it does wrap, I need the top line to stay on the top line and then wrap, as if it were all one TextBlock. Here's a made-in-Paint visual of what I need:
Here's my code that I've got so far:
<toolkit:WrapPanel Orientation="Horizontal">
<TextBlock Text="Title: " FontWeight="Bold"/>
<TextBlock TextWrapping="Wrap" Text="More text goes here " />
</toolkit:WrapPanel>
<toolkit:WrapPanel Orientation="Horizontal">
<TextBlock Text="Title: " FontWeight="Bold"/>
<TextBlock TextWrapping="Wrap" Text="More text goes here and I want it to wrap lines and go underneath the title but I can't get it to to do that. :( " />
</toolkit:WrapPanel>
Now, I'm not opposed to this being done in one TextBlock either (if possible). I know that with TextBlock.Inlines I can add a Run of bold text and then another of regular text. The problem with that is Inlines cannot be bound using MVVM (which I'm not using in this demonstration, but will be using in the final code).
So whatever the solution is, I need to be able to set the values of the TextBlocks from the code-behind so that I know it can be done with MVVM.
Does anyone know of a way to achieve this?
Use the RichTextBox control with a different run for every font style.
<RichTextBox>
<Paragraph>
<Run FontWeight="Bold">Title:</Run>
<Run>More text goes here and I want it to wrap lines and go underneath the title but I can't get it to to do that. :(</Run>
</Paragraph>
</RichTextBox>
You can bind the Text property of the Run elements to your data context, ex.:
<RichTextBox>
<Paragraph>
<Run FontWeight="Bold"
Text="{Binding Header}"></Run>
<Run Text="{Binding Text}"></Run>
</Paragraph>
</RichTextBox>
Fix Width Property of both StackPanel. this may help you. Problem is if you don't set Width Property it consider as Auto width.
<StackPanel Orientation="Horizontal" Width="400">
<TextBlock Text="Title: " FontWeight="Bold"/>
<TextBlock TextWrapping="Wrap" Text="More text goes here " />
</StackPanel >
<StackPanel Orientation="Horizontal" Width="400">
<TextBlock Text="Title: " FontWeight="Bold"/>
<TextBlock TextWrapping="Wrap" Text="More text goes here and I want it to wrap lines and go underneath the title but I can't get it to to do that. :( " />
</StackPanel >
This would helpful for you:
<toolkit:WrapPanel Orientation="Horizontal">
<TextBlock>
<Run FontWeight="Bold" Text="{Binding Header}"></Run>
<Run Text="{Binding Text}"></Run>
</TextBlock>
</toolkit:WrapPanel>
Have you tried using construction like this?
<TextBlock>
<TextBlock.Inlines>
<Bold>
<Bold.Inlines>
<Run Text="Title: "/>
</Bold.Inlines>
</Bold>
<Run Text="{Binding Text}"/>
</TextBlock.Inlines>
</TextBlock>
It works like a charm if text-block should be bound to just one block of text.

How to customize the TextBlock inside the LonglistSelector

<toolkit:LongListSelector>
<toolkit:LongListSelector.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Name}" FontSize="22" TextWrapping="Wrap" />
<TextBlock Name="Info" FontSize="18" TextWrapping="Wrap" />
</StackPanel>
</DataTemplate>
</toolkit:LongListSelector.ItemTemplate>
</toolkit:LongListSelector>
I have the above LongListSelector which selects the "Name"(Binded in the first Textblock )values from a list. I also wanted to additional text to it,for which i created one more Textblock below that. I couldn't add the text to the second TextBlock like(Info.Text="HI") because it is inside the LonglistSelector
How to give the values to the second Textblock??
Thanks
Do you mean Info is a property on the DataContext of the page and not on the current item where Name is?
If so, you can use a DataContextProxy to get to the data outside of the list item. If not, you'll have to be more clear on what you mean.