I'm creating a WPF application which shows a list of styled messages. My goal is to have the contents of multiple styled messages selectable, similar to how you can in Skype:
Currently, I have a ListBox which contains an extension of ListBoxItem that is styled to my needs:
However, this method does not satisfy my goal of being able to select the text of multiple messages at the same time. It is only possible to select the text inside one message.
I also tried to put my custom elements inside a RichTextBox control within BlockUIContainers (which is what I suspect I will end up having to use), but the text inside each element cannot be selected, only the entire element:
Next, I attempted to extend the "Run" element, but I cannot figure out how to put a border around it to style an individual message.
<Run.Style>
<Style TargetType="{x:Type Run}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Run}">
<Border Background="{TemplateBinding Background}" x:Name="Bd" CornerRadius="2">
<ContentPresenter />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Run.Style>
With this XAML, I tried to surround the content of the Run using a template, a border element, and a content presenter. However, the Run control does not appear to support templates.
If anybody could point me in the right direction, that would be greatly appreciated.
I don't know if this will help you but is just another idea...
Use one text control with transparent background so you can select all the text at once. Then you have to draw rectangles behind the text blocks. Like an optical ilussion.
The challenge here is calculating the exactly size of the text rectangle box and the text allignment. My idea is having a predefined sizes and positions design (left text box, right text box, date, etc) so the size and positioning calculations are easier.
Another idea is play with the mouse and/or selection events. During the user text selection replace it programatically with your own selection. The user will think that is he who is selecting the text but is the application who is doing it. Another illusion...
I hope you could resolve it.
Related
I would like create a button with text and image inside in, but this button should be transparent without loose behavior as cursors hand on mouse over and so on..
Also, it doesn't change its background color on mouse over. It's Always should appear transparent showing only my text and my image.
Is it possibile?
I think a very simple ControlTemplate will produce the desired output :
<ControlTemplate x:Key="TransparentButton" TargetType="Button">
<ContentPresenter Cursor={TemplateBinding Cursor}/>
</ControlTemplate>
Then simply apply if to the Templateproperty of your button.
Just add a {TemplateBinding Property} for the any properties you want to inherit. You should have a look at the default ControlTemplates on MSDN for your specific target (it may vary if targeting WP8, Silverlight or desktop)
I am altering a Text Box control to be a code editor in C# WPF. The effect I want is like in Visual Studio when you scroll to the bottom of a code document, it stops scrolling when you reach the end of the text, not when the text reaches the bottom of the control.
I've been trying to do this with a margin or by adding an element of a fixed height. This just puts it below the content host so it cuts short. It doesn't add extra distance to the scroll bar.
This would be easier in a normal scroll viewer but I'm modifying the Text Box's template like this:
<TextBox.Template>
<ControlTemplate xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:s="clr-namespace:System;assembly=mscorlib" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Grid>
<ScrollViewer x:Name="PART_ContentHost" SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}"/>
</Grid>
</ControlTemplate>
</TextBox.Template>
So I basically want to add extra room to the bottom of my content so text doesn't stop at the bottom of the screen. I'm using CodeBox 2 as the basis of the back-end by the way. Any help would be appreciated.
I have a Silverlight OOB application. Some of the TextBlocks (but not all) have started to behave strangely. When viewed in the Designer, they're the size I want them to be. When I run the app, they appear roughly 1pt bigger.
I've checked it with Silverlight Spy, and the font size/weight are the same as at design time. If I make the fonts too small in design mode, they come out the right size at runtime. If I use Silverlight Spy to make them 1pt too small at runtime, they look the right size. Silverlight Spy shows that the TextBlocks aren't affected by a style.
What could be causing this? I'm using VS 2010 and Silverlight 5.
In cases where I have observed differences in font rendering in WPF or Silverlight, it was almost always due to the FontFamily being different rather than the FontSize. If you can, verify with Silverlight Spy that the font families are in fact the same.
Interestingly, there can be differences even if the effective font family is the same. In one of our applications, we are using a composite FontFamily definition that uses Segoe UI for most western glyph ranges, but a serifed font for the Greek glyph ranges to better differentiate those characters (this is a finance application). I noticed that the line height was slightly different in the editor than in the runtime application. It seems the editor doesn't always apply composite fonts correctly (or didn't, prior to some of the VS2012 updates).
Check if there are any Transforms present.
I had this problem with Labels, Buttons and Checkboxes. After a look using WPF inspector, it had come to my attention that the text in each of the above contains a TextBlock to display the actual text, and I had set my default FontSize for a Text Block to 13 which was then overriding the value I specified for (e.g) the Label.
This sorted me out
<ControlTemplate x:Key="LabelTemplate" TargeType="Label">
<TextBlock Text="{TemplateBinding Content}" FontSize="{TemplateBinding FontSize}" />
</ControlTemplate>
<Style TargetType="{x:Type Label}">
<Setter ... etc. etc. other styling I had already in here />
<Setter Property="Template" Value="{StaticResource LabelTemplate}" />
</Style>
I want to change the padding and colors of a DataGrid's column headers. The padding works fine but if I change the background color the cell grippers dissappear and there is no longer mouse over or mouse pressed affects on the cells. Here's what I am doing -
<DataGrid AutoGenerateColumns="False" ItemsSource="{Binding Collection}" AlternatingRowBackground="#FFF7F7F7">
<DataGrid.ColumnHeaderStyle>
<Style TargetType="{x:Type DataGridColumnHeader}">
<Setter Property="Padding" Value="20,10,20,10"/>
<Setter Property="Background" Value="#FFAACCFF"/>
</Style>
</DataGrid.ColumnHeaderStyle>
...
...
...
</DataGrid>
Anybody know how to change the background color properly? I would also like to change the colors of the mouse over and mouse pressed events. I think it has something to do with triggers, anyone know?
Edit: Here is a picture of what my DataGrid header looks like, as you can see no grippers and no mouseover color change (it doesnt show in the screenshot but my mouse is on top of Property2).
Something you might consider is changing the row color during the Row PrePainting or Row PostPainting event; it should give you better control on some of the smaller things you want to do and allow you to customize it based on the values in the grid/row.
I would suggest you to define your own ControlTemplate for DataGridColumnHeader. Inside that template define your own gripper and color.
As you mentioned you can use triggers to change color inside control template. Internet is full of examples which uses triggers to change color for example take a look at this post
why I should use ScaleX="2" for example instead of double the width of my control ??
<Button Width = "100" Content="Button1"/>
<Button Width = "50" Content="Button2">
<Button.RenderTransform>
<ScaleTransform ScaleX="2" />
</Button.RenderTransform>
</Button>
both buttons look exactly the same so again, what scale is good for
Your concept of "exactly the same" seems to be different from mine.
The sizes you specify with Width and Height affect how much space the control takes up in the layout, this means that the control may take more or less space but the font size will stay the same for example. The RenderTransform is a manipulation on top of this which no longer concerns the layout and hence may distort the control.
A render transform does not regenerate layout size or render size
information. Render transforms are typically intended for animating or
applying a temporary effect to an element. For example, the element
might zoom when focused or moused over, or might jitter on load to
draw the eye to that part of the user interface (UI).
See also the LayoutTransform property, which does affect layout but still distorts the control.
What if it was more complicated than a Button with a Width? What if you had a complex Path/Geometry, or maybe even a group of controls? You wouldn't want to go and manually change everything. What if you had a custom control, where you wanted to give one instance the size 100x100, and another instance 150x150? What if you were implementing zoom functionality (think google maps)?
In short, for your specific example, it doesn't provide much use. But there are many other cases where it does.
It's useful when you don't have the ability to scale some parts of a control. Consider the DatePicker control. The default implementation has a drop-down calendar that was too small for my users' liking, so I introduced this snippet of XAML into my App.xaml file:
<Style TargetType="w:DatePicker">
<Setter Property="CalendarStyle">
<Setter.Value>
<Style TargetType="w:Calendar">
<Setter Property="LayoutTransform">
<Setter.Value>
<ScaleTransform ScaleX="1.5" ScaleY="1.5" />
</Setter.Value>
</Setter>
</Style>
</Setter.Value>
</Setter>
</Style>
Now the calendar is 1.5 times as big, and my users are happy. There is no "CalendarWidth" or "CalendarHeight" property that I can set directly, so the ScaleTransform saved the day.