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. :)
Related
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
I have a strange problem with the textBox in WPF. I have a simple textbox inside a stackpanel binded with some text on the code behind. When the text becomes too long some part of it changes color. Here is an example
The stackpanel is this
<StackPanel Canvas.Left="50" Canvas.Top="111">
<TextBlock Text="{Binding Title}" FontSize="32" Foreground="White" />
<TextBlock Text="{Binding Subtitle}" FontSize="15" Foreground="#9EA3AA"/>
</StackPanel>
How can I make all the text white?
As mentioned by Clemens you are experiencing overlap. To fix this make the cell containing the orange cpu image and text not extend so high. You should be able to just drag and drop.
I can't find any way to increase the spacing between each radio button to match the format of my interface
this is my XAML code for the radio button
<dxe:ListBoxEdit Name="xrbSplitFreight" Grid.Row="1" Grid.RowSpan="5" FontWeight="Bold" Grid.Column="8" Height="143" VerticalAlignment="center" Width="218" HorizontalAlignment="Left" Grid.ColumnSpan="3" ShowBorder="False" Margin="0,0,0,7">
<dxe:ListBoxEdit.StyleSettings>
<dxe:RadioListBoxEditStyleSettings />
</dxe:ListBoxEdit.StyleSettings>
and this is how im populating the buttons
private void InitSources()
{
List<String> source = new List<String>();
source.Add("Split Freight");
source.Add("Print Comment");
source.Add("Do Not Split Freight");
xrbSplitFreight.ItemsSource = source;
}
I have tried numerous properties like padding and margin properties and it doesn't change the spacing.
If I understand you correctly, what you want is to increase the space between each radiobox and its text so it matches the space between the checkbox and its text above.
The problem here is that the radiobox content does not have a margin property to move it independently from the radiobox. Luckily in WPF you can encapsulate almost every control in any other control. So the solution, instead of using simple text, is to use a control that can display text and has a margin property like this:
<RadioButton GroupName="GroupName">
<RadioButton.Content>
<TextBlock Text="Option 1" Margin="5 0 0 0"/>
</RadioButton.Content>
</RadioButton>
Try using Margin to add space between controls.
<RadioButton Margin="5"></RadioButton>
or
<RadioButton Margin="5,0,5,0"></RadioButton>
EDIT
Check this out.
<ListBox ItemsSource="MyList">
<ListBox.ItemTemplate>
<DataTemplate>
<RadioButton Margin="10" Content="{Binding Value}"/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Each RadioButton is separated with margin given.
I think the problem is You're trying to place radio buttons inside of ListBox. Have You tried putting them into StackPanel with vertical orientation property? If You'll try You'll probably be able to set margins between them.
I'm having a bit of a trouble with the autosizing of a text. I read somewhere that if I wanted to achieve that, i need to put my textblock in a viewbox. The problem with that is this way the text isn't split into multiple lines. For example "very very very long text" is almost unreadable, but "simpletext" looks just fine.
<Viewbox Grid.Row="1" Grid.Column="0" Grid.RowSpan="2" Grid.ColumnSpan="4" StretchDirection="DownOnly">
<TextBlock
Text="{Binding FieldName}" VerticalAlignment="Center" HorizontalAlignment="Center"
TextWrapping="Wrap" FontWeight="Bold" FontFamily="Nueva Std" />
</Viewbox>
Thank you in advance!
Try to set a width (or max width) on the TextBlock.
Add these properties to your textblock TextWrapping="Wrap" - wrapping IsHyphenationEnabled="True" - breaking the word with hyphen
In this case, here is another solution: take this class and make your own LimitedViewbox version, which will have some LowerStretchLimit property. I think it should work.
I have an app with some button which contains different text, of different length. When the text is longer than the width of the button, only the first part of the text is displayed.
Is there a way to dynamically split the text in 2 lines or more?
Thanks
Use TextBlock to define button content and set TextWrapping property.
<Button>
<TextBlock TextWrapping="Wrap">your text</TextBlock>
</Button>
For specific breaks in your text I like to use Runs and LineBreaks
<Button>
<TextBlock TextWrapping="Wrap" FontSize="9">
<Run Text="Bind some text here" />
<LineBreak/>
<Run Text="Add some more text" />
</TextBlock>
</Button>