I am trying to implement a rectangular shadow effect in WPF, something like this:
https://css-tricks.com/multi-line-padded-text/
The shadow should follow each line of text, but it should not have a space between the lines. Also, the shadow will have some transparency, and this rules out adding a separate background to inline Runs. I tried this, and where the shadows overlapped the opacity values formed a darker color.
I have investigated so far TextBox, TextBlock and RichTextBox. I tried changing Run.Background, or selecting the text and changing the selection foreground/background. With no success, none of these are doing exactly what I need.
Basically what (I think) I need is a text formatting feature, that would allow me to create a properly wrapped text from a string IN MEMORY, with separate Runs for each and every line. After this, I could find out the pixel length of each Run, add these Runs manually to a RichTextBox or to a TextBlock, with manually created rectangles behind them.
Unfortunately, when I add text to a TextBlock or a RichTextBox, wrapping is applied to the Run itself, instead of creating separate Runs for each wrapped line.
I have not received any replies, so I am trying to answer my own question.
My major problem with TextBlock was that if I added a slightly transparent background color to the inline Run objects, they formed a darker color as the lines overlapped slightly. To overcome this issue, I changed the Run background to non-transparent, and this way the 100% opacity values would not result in visibly overlapping lines. Then I changed the opacity of the whole TextBlock to 80% - and I got the result I expected.
Here is a sample xaml:
<TextBlock TextWrapping="Wrap" FontWeight="SemiBold" FontSize="23" FontFamily="Arial" TextBlock.LineHeight="24.65"
TextOptions.TextFormattingMode="Ideal" TextTrimming="CharacterEllipsis" LineStackingStrategy="BlockLineHeight" Opacity="0.8">
<Run Background="#FFFF0000" Text="This text here" />
<Run Background="#FFFF0000" Text="will be visible across" />
<Run Background="#FFFF0000" Text="multiple lines" />
</TextBlock>
Please note that the LineHeight value is slightly higher than the FontSize value. This makes sure that there will be no visible gaps between the lines.
Related
No changes occur when you try to
change the font size of the Message property of
the InfoBar class with the FontSize property.
Problem
Font size has not changed
Source Code
<InfoBar
Severity="Warning"
IsOpen="True"
FontSize="50"
Title="Data Requests"
Message="This is a test. FontSize at 50" >
</InfoBar>
This was a messy workaround that I tried and looks like it works, somehow.
<InfoBar x:Name="Notification"
IsOpen="true">
<InfoBar.Content>
<TextBlock
Text="Hello, world!"
Margin="0,-50,0,0"
FontSize="50"
/>
</InfoBar.Content>
</InfoBar>
You can add custom contents inside your bar. As you can see, I added a TextBlock and applied the changes. It works well with the icon and with the close button. If you want to add more TextBlocks or other Components, you will have to work with the style.
In this example, I created a negative margin on top, so the block could move up, aligned to the bar icon and close button.
<TextBlock Text="{Binding Logs,Mode=OneWay}" />
In my UWP application, I want to change the color of lines based on the specific keyword in beginning of the line.
I need to change the lines background color if line start with word WARNING
Can anyone suggest how I can achieve this with code behind?
I need to change the lines background color if line start with word WARNING
No, you can't change the background color of the line of text directly in the TextBlock Class. This is the same for RichTextBlock Class and RichEditBox Class. What you could change is the Foreground color of the text.
For your requirement,what you could do is to put the Textblock into a border or something else that has a background property
Like this:
<Border Background="Red">
<TextBlock Text="warning ....."
FontSize="10" />
</Border>
I am developing a Windows Store app and I've done this before, months ago, but all of a sudden, in this new app, I can't get the image to display inside the button (properly).
<Button x:Name="ShowView" Grid.Column="1" Width="32" Height="32" HorizontalAlignment="Right" VerticalAlignment="Center" Margin="0,61,20,33">
<StackPanel HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Image x:Name="ShowViewImage" Source="/Assets/ShowView.png" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
</StackPanel>
</Button>
As you can see, the code is fine (unless things have changed drastically, which by the looks of it they haven't). So what gives? This is the only code I have so far in my XAML file other than the defauls that VS generates as it's a new Project.
P.S. I've also tried taking out the StackPanel and just having Button > Image, but this produces the same result.
So, when the BUtton displays at runtime, all I can see is a very tiny, 2pixels of the image (but the image is actually 32x32pixels. How do I properly display an "Image Button"?
The problem is that your Width and Height for the button are far too small. You've made it 32x32 pixels, but the button will use almost all of that itself for the space it leaves around the visible border, the border itself, and the padding between the border and the button's content.
(It leaves space around the edge to provide a larger hit target than the visible appearance. This is useful on touchscreens, where accurate finger placement is difficult.)
All that's left for your image is a few pixels.
You'll need to make the button about 62x52 pixels to leave enough space in the middle for a 32x32 pixel bitmap.
You could get away with a slightly smaller button if you explicitly set smaller Margin and Padding properties, although as mentioned above, the margin is there for a reason.
You have a couple options, the Padding property for instance is Template bound with some pre-set padding added to it. So with your Button having a fixed Height and Width set to 32 something as simple as setting Padding="0" could fix it for you depending on the actual size of your Image.
If worse comes to worse though, you could always just make your own Button Template. There's a couple easy ways to do this. One of which would be just go make a copy of the default Button Template, rip out all the Padding/Margin/Height/Width crap preset in there and just change its name then apply your new template directly to your button like;
<Button x:Name="ShowView" Grid.Column="1" HorizontalAlignment="Right" VerticalAlignment="Center" Margin="0,61,20,33"
Style="{StaticResource YourCustomButtonTemplateForImages}">
<Image x:Name="ShowViewImage" Source="/Assets/ShowView.png"/>
</Button>
Or... another option would be, embed your Image inside of a ViewBox inside your button and it will fit and re-scale itself accordingly to its set available size.
Oh, you might also want to make your Background="Transparent" while you're at it to make it look a little cleaner as just an image.
Hope this helps.
I'm writing a windows phone app and I would like to implement a "tap text to expand" feature.
I have a series of TextBlocks that currently look much like this repeated multiple times:
<TextBlock
Name="description" HorizontalAlignment="Left" VerticalAlignment="Top"
Margin="12,40,0,0" Width="444"
TextWrapping="NoWrap" TextTrimming="WordEllipsis" />
[Note the last two: TextWrapping="NoWrap" TextTrimming="WordEllipsis" and the lack of Height being set.]
This shows one line, and when the line is longer than the screen it ends in ellipsis, which is perfect. Currently, when the user taps the TextBlock I turn TextWrapping to Wrap. This allows the text to take as many lines as it needs (the functionality I want).
The problem is that when I turn TextWrapping to Wrap it expands into the TextBlock below it (remember, I have a bunch of these packed next to each other). Also, to get it to expand fully I never initially set Height, so if I try to access it later I get NaN (and ActualHeight never changes from 26.6, no matter how many lines it expands to be)
I'm looking for a way to dynamically push the TextBlocks below it down the amount necessary to display the text in its entirety, but I don't know the "correct" way to go about it. (on a similar note: hardcoding Margin is unideal, especially for dynamicly expanding text, is there a "RelativeLayout" (or something similar) that I've been unable to find? )
Have you tried placing your TextBlocks in a StackPanel? This should prevent the TextBlock objects from overlapping and you can set their individual margin values to ensure the spacing you want.
My TextBlock has for example 50x50 pixels to display text, however if there is more text, I want a user to be able to scroll. Is there an autoscroll feature for this control?
Should I use a different control better suited for this task?
Here's a couple of pics to illustrate the problem:
This one works fine because the text fits in snugly:
This one doesn't seem correct. Text is cut off.
Just in case someone comes into the same problem. Just wrap the textBlock with a control. Works like a charm!
<ScrollViewer Background="Black">
<TextBlock x:Name="textBlockBackStory"
FontSize="12"
Foreground="Orange"
TextWrapping="Wrap"
Background="Black"
TextDecorations="None">
Backstory here.
</TextBlock>
</ScrollViewer>
You can put your textblock inside a ViewBox, so the font will adjust to display the entire text.