Develop Reference

Implementation for entering a password: How to click on the TextBox located under the TextBlock?

I'm trying to make an alternative way for a password binding (I know there are different ways)
I put a textblock and a textbox in the same location
The user will write inside the textbox, its foreground will be transparent
The textblock will bind with the length of the textbox's text and show "*"s according to the length.
when I'll hold down some "eye icon" the textblock will not be visible and the the textbox's foreground will be black
The problem is that when I put them both together, the block blocks the box and I can't write in it.
Maybe it's just a property I didn't find, "priority" or something
Would like a suggestion on what should I do, thank you :)

The problem is that when I put them both together, the block blocks the box and I can't write in it.
Maybe it's just a property I didn't find, "priority" or something
IsHitTestVisible property.
Example:
<StackPanel>
<TextBox Text="1234"/>
<Grid>
<TextBox x:Name="textBox" Text="1234"/>
<TextBlock Text="***********" Background="Wheat"
IsHitTestVisible="False"/>
</Grid>
<TextBlock Text="{Binding Text, ElementName=textBox}"/>
</StackPanel>
BUT!!!
In my opinion, it is easier to make the TextBox transparent.
In such an implementation, you can see where the input cursor is in the field.
Example:
<StackPanel>
<TextBox Text="1234"/>
<Grid>
<TextBlock Text="***********" Background="Wheat"/>
<TextBox x:Name="textBox" Text="1234"
Background="Transparent"
Foreground="Transparent"
BorderThickness="0"/>
</Grid>
<TextBlock Text="{Binding Text, ElementName=textBox}"/>
</StackPanel>

Only you should change controls code position!
change

How to wrap text from 2 different textblocks with different alignments

I would like to wrap text from 2 different textblocks.
The reason I need 2 is because they both have a different text format/alignment.
It currently looks like this:
I would like the xx.xx to be in the red circle if there is still room (like in the image).
This is the xaml:
<TextBlock TextAlignment="Right" TextWrapping="Wrap">
<TextBlock
Text="texttexttext this is text texttexttext this is text texttexttext this is text texttexttext this is text texttexttext this is text texttexttext"
TextAlignment="Left"
TextWrapping="Wrap" />
<TextBlock
HorizontalAlignment="Right"
FontSize="10"
Foreground="LightGray"
Text="xx.xx"
TextAlignment="Right"/>
</TextBlock>
Inlines do not work either as Run's do not support alignment (and I need 2 different alignments).
Essentially WhatsApp is a perfect example of the behavior I want:
I've tried a lot of variations of my current code but either the xx.xx starts on a newline or the other text will overlap.

Try to do it using the following way (I've restricted the TexBlock size to wrap the text)
<TextBlock Width="200" TextAlignment="Right" TextWrapping="Wrap">
<Run Text="texttexttext this is text texttexttext this is text texttexttext this is text texttexttext this is text texttexttext this is text texttexttext"/>
<Run FontSize="10" Text="xx.xx" Foreground="LightGray"/>
</TextBlock>
Actually it looks like as (xx.xx text is displayed on the same line)

To make it look like in your example from Whatsapp, you can put both TextBlocks into a Grid and position them accordingly.
<Grid VerticalAlignment="Top">
<TextBlock
Text="xx.xx"
HorizontalAlignment="Right"
VerticalAlignment="Bottom"
FontSize="10"
Foreground="LightGray" />
<TextBlock
Text="texttexttext this is text texttexttext this is text texttexttext this is text texttexttext this is text texttexttext this is text texttexttext dfgdffdg fgffgf"
TextWrapping="Wrap" />
</Grid>
This is as simple as it can get to achieve what you are trying to achieve and it allows you to add any other controls to the xx.xx part, like in the Whatsapp example (the Check icon). The only problem with this solution is the situation from the top text from your Whatsapp example, because the text will simply be on top of the xx.xx text.
If I really wanted to achieve something like this, then I would programmatically check (every time the Text changes) the width of the TextBlock and whether or not it overlaps with the xx.xx TextBlock. And if it does, I would split it into two TextBlock objects: One for the text above, and one just for the last line. It's complicated, but I don't know of any other option how to achieve something like this. It's a lot of work for a little UI tweak. :)

String written in different fonts

In my UWP app I'm trying to add a Button which has written on it an icon of the Segoe MDL2 font family and today's date, the problem is that I cannot show both the icon and the text due to the fact that they belong to different font families, is there a way to show both?
The button is defined like this in the XAML code:
<Button x:Name="button" Content=" " FontFamily="Segoe MDL2 Assets" AutomationProperties.Name="Favorite" />
And the code I use to update the content property of the button is this:
button.Content = "" + date;

With WPF the trick is to use a TextBlock as your button's content. I am assuming this also works in UWP, but I am not 100% sure.
<Button>
<Button.Content>
<TextBlock>
<Run FontFamily="Arial">Hello </Run>
<Run FontFamily="Courier New">Mr. Bob</Run>
<Run FontFamily="Arial">, you have foo.</Run>
</TextBlock>
</Button.Content>
</Button>
With the TextBlock you can add multiple Run objects to explicitly define different formats for each section of text.

How to textwrap contents of multiple controls aligned horizontally so that it looks like a single string?

I have three controls aligned horizontally, a ListPicker, a Textblock and a ListPicker.
The content would look like,
United States of America v/s United Kingdom
United States of America - content of first ListPicker (changes the value based on item selected)
v/s - Textblock content
United Kingdom - content of second ListPicker (changes the value based on item selected)
I need to textwrap this whole string "United States of America v/s United Kingdom" as if it is the content of a single control.
Is this possible? Please help.

You could try using a RichTextBox with InlineUIContainers:
<RichTextBox>
<Paragraph>
<InlineUIContainer>
<ListBox>
<ListBoxItem>United states of America</ListBoxItem>
<ListBoxItem>United states of America</ListBoxItem>
</ListBox>
</InlineUIContainer>
<Run Text="vs" />
<InlineUIContainer>
<ListBox>
<ListBoxItem>United Kingdom</ListBoxItem>
<ListBoxItem>United Kingdom</ListBoxItem>
</ListBox>
</InlineUIContainer>
</Paragraph>
</RichTextBox>
But this still won't wrap the text inside the InlineUIContainer. It will wrap only the parts relative to one another.
If you want to be able to wrap the inside text, you need to change your approach. The only solution I can think of is to use Hyperlinks:
<RichTextBox>
<Paragraph>
<Hyperlink Click="Hyperlink1_Click">United states of America</Hyperlink>
<Run Text=" vs " />
<Hyperlink Click="Hyperlink2_Click">United states of America</Hyperlink>
</Paragraph>
</RichTextBox>
and to handle the Hyperlink.Click event and instead of navigating, to display a list of items to be picked and then change the text of the hyperlink to reflect the new selected item. You may also want to try to restyle the hyperlinks

you can use stackpanel as follow's:
<StackPanel Orientation="Horizontal" >
<toolkit:ListPicker VerticalAlignment="Center" Width="100"/>
<TextBlock Text="vs" VerticalAlignment="Center" TextAlignment="Center"/>
<toolkit:ListPicker VerticalAlignment="Center" Width="100" />
</StackPanel>
Note: "Width" depends on you.

How to handle subtext Tap?

In Windows Phone (on both Windows Phone 7.1 and Windows Phone 8), in a block of text with wrapping I want a subtext to be underlined and clickable. However, Runs in TextBlock/RichTextBox don't have any events. Using WrapPanel of WPToolkit I could achieve the desired wrapping by putting each words in a separate TextBlock, but i loose the ability to set TextAlignment to Justify. Is there a better way to do this?
<TextBlock TextWrapping="Wrap">
<Run Text="I have a paragraph consisting of multiple lines that I want to be neatly wrapped with just one word that I'll be able to "/>
<Run TextDecorations="Underline">tap</Run>
</TextBlock>
<toolkit:WrapPanel>
<TextBlock Text="I "/>
<TextBlock Text="have "/>
<TextBlock Text="a paragraph "/>
<TextBlock Text="consisting "/>
...
<TextBlock Text="able to"/>
<TextBlock TextDecorations="Underline" Tap="HandleLinkTap" Text="tap"/>
</toolkit:WrapPanel>

Does https://stackoverflow.com/a/15148602/546896 solves your problem?
I know little hackish way but still see if it works.
<RichTextBox TextWrapping="Wrap">
<Paragraph>
<Run Text="I have a paragraph consisting of multiple lines that I want to be neatly wrapped with just one word that I'll be able to " />
<Hyperlink Click="HandleLinkTap">Tap</Hyperlink>
</Paragraph>
</RichTextBox>