Strange behaviour with TextBox.Foreground.Opacity property - silverlight

I created a silverlight template control. Thouse control consist 4 elements: 2 textbox and 2 textblock.
markup (in generic.xaml):
<Style TargetType="local:InputForm">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="local:InputForm">
<Border Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<TextBlock Text="Login" Grid.Column="0" Grid.Row="0"/>
<TextBlock Text="Password" Grid.Column="0" Grid.Row="1"/>
<TextBox x:Name="LoginTextBox" Grid.Column="1" Grid.Row="0" Text="Login..."/>
<TextBox x:Name="PasswordTextBox" Grid.Column="1" Grid.Row="1" Text="Password..."/>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
In code file I get the textbox from template and set Foreground.Opacity property equels 0.5.
code:
public class InputForm : Control
{
private TextBox _loginTextBox;
private TextBox _passwordTextBox;
public InputForm()
{
this.DefaultStyleKey = typeof(InputForm);
}
public override void OnApplyTemplate()
{
base.OnApplyTemplate();
_loginTextBox = this.GetTemplateChild("LoginTextBox") as TextBox;
_passwordTextBox = this.GetTemplateChild("PasswordTextBox") as TextBox;
SetInActive();
}
private void SetInActive()
{
_loginTextBox.Foreground.Opacity = .5;
_passwordTextBox.Foreground.Opacity = .5;
}
}
When I added this control in my silverlight application all textboxs element began represent text with Foreground.Opacity = 0.5
Start application:
Select "Login" tab:
Back to "Some infromation" tab:
Sample located here: http://perpetuumsoft.com/Support/silverlight/SilverlightApplicationOpacity.zip
Is it silverlight bug or I do something wrong?

The problem is that the Foreground property is of type Brush which is a reference type (a class).
When you assign .Opacity = 0.5 you are changing the opacity value of the referenced Brush. All other elements that are referencing the same brush will be affected.
Ordinarily we would use a Storyboard in VisualStateManager in the control template to specify the visual appearance of a control in different "states".
However a quick fix for your code would be:
private void SetInActive()
{
Brush brush = new SolidColorBrush(Colors.Black) { Opacity = 0.5 };
_loginTextBox.Foreground = brush
_passwordTextBox.Foreground= brush
}

Related

Force a repaint of a custom drawn UIElement in a custom WPF control

I'm working on a custom WPF control. The main purpose of this control is to visualize thousands of graphical primitives in a scrollable area. The core part of the control's template looks like this:
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type local:ItemVisualizer}">
<Border Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<local:ItemAreaElement Grid.Row="0" Grid.Column="0" x:Name="PART_ItemArea" />
<ScrollBar Grid.Row="0" Grid.Column="1" x:Name="PART_ScrollBarVert" Orientation="Vertical" Maximum="100" />
<ScrollBar Grid.Row="1" Grid.Column="0" x:Name="PART_ScrollBarHorz" Orientation="Horizontal" Maximum="100" />
<Rectangle Grid.Row="1" Grid.Column="1" x:Name="PART_SizeGrip" Focusable="False" Fill="#F0F0F0" />
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
The ItemAreaElement is responsible for drawing the items. For simplicity, we can think that its core part looks like this:
class ItemAreaElement : FrameworkElement
{
protected override void OnRender(DrawingContext drawingContext)
{
base.OnRender(drawingContext);
for (int i = 0; i < _data.ItemCount; i++)
{
drawingContext.DrawLine(_penLine, new Point(0, i * 10), new Point(100, i * 10));
}
}
}
I need to repaint the ItemAreaElement every time when a related property in the whole ItemVisualizer control changes. However, I didn't find a way to do that in WPF. The well know trick with the Dispatcher object does not work in my case:
private static void OnItemCountPropertyChanged(DependencyObject source,
DependencyPropertyChangedEventArgs e)
{
ItemVisualizer vis = (ItemVisualizer)source;
vis._itemArea.Dispatcher.Invoke(delegate { }, DispatcherPriority.Render);
}
, where _itemArea is a local reference to the ItemAreaElement got in OnApplyTemplate():
public override void OnApplyTemplate()
{
base.OnApplyTemplate();
if (this.Template != null)
{
_itemArea = this.Template.FindName("PART_ItemArea", this) as ItemAreaElement;
_itemArea.Grid = this;
}
}
Are there other ways to force an update of the UIElement in my construction? Or maybe, I need to redesign the whole control to make it possible?
It should usually be sufficient to specify FrameworkPropertyMetadataOptions.AffectsRender on registration of the ItemCount property:
public static readonly DependencyProperty ItemCountProperty =
DependencyProperty.Register(
"ItemCount", typeof(int), typeof(ItemVisualizer),
new FrameworkPropertyMetadata(FrameworkPropertyMetadataOptions.AffectsRender));
If that doesn't help, you could force a redraw by calling InvalidVisual() on the ItemAreaElement:
var vis = (ItemVisualizer)source;
vis._itemArea.InvalidVisual();

Binding from an XAML resource dictionary to a class property

I am having a very difficult time setting up a binding which I think should be easy. Help is greatly appreciated.
I have a resource dictionary named FormResource.xaml. In this dictionary contains a Style for the ScrollView that I redine the template for. The purpose is I want a wider vertical scrollbar on it.
<Style x:Key="LargeScrolling" TargetType="ScrollViewer">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ScrollViewer">
<Grid Background="{TemplateBinding Background}">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<ScrollContentPresenter x:Name="ScrollContentPresenter"
Margin="{TemplateBinding Padding}"
ContentTemplate="{TemplateBinding ContentTemplate}"/>
<ScrollBar x:Name="PART_VerticalScrollBar"
Style="{StaticResource LargeVerticalScrollBar}"
Width="{Binding ElementName=MDTForm, Path=ScrollBarWidth}"
IsTabStop="False"
Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}"
Grid.Column="1" Grid.Row="0" Orientation="Vertical"
ViewportSize="{TemplateBinding ViewportHeight}"
Maximum="{TemplateBinding ScrollableHeight}"
Minimum="0"
Value="{TemplateBinding VerticalOffset}"
Margin="0,-1,-1,-1"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I have a UserControl named FormControl.
public class FormControl : UserControl
I used to have this as a partial class with a XAML componenet, in which what I am trying to do worked, but I had to remove the XAML since I derive from this class in another assembly and WPF does not allow you to derive from a partial class in another assembly.
In FormControl I define a ScrollBarWidth property.
public static readonly DependencyProperty ScrollBarWidthProperty = DependencyProperty.Register("ScrollBarWidth", typeof(double), typeof(FormControl));
public double ScrollBarWidth
{
get { return (double)base.GetValue(ScrollBarWidthProperty); }
set { base.SetValue(ScrollBarWidthProperty, value); }
}
When I had this as a partial class in the main declaration I gave the FormControl class a Name of MDTForm, which is what I am using as the ElementName in my binding. I tried registering this name in FormClass.cs but no matter what I do the scrollbar is not picking up the property value.
Here is where I create my ScrollViewer in the FormControl class.
_canvasScrollViewer = new ScrollViewer();
_canvasScrollViewer.VerticalScrollBarVisibility = ScrollBarVisibility.Auto;
_canvasScrollViewer.VerticalAlignment = VerticalAlignment.Top;
_canvasScrollViewer.MaxHeight = Constants.ScrollViewMaxHeight;
_canvasScrollViewer.Style = (Style)FindResource("LargeScrolling");
The only way that I got this to work was to bind to a static property. I used this for the binding.
Width="{Binding Source={x:Static form:FormControl.ScrollBarWidthP}}"
Then defined the property as such.
public static double ScrollBarWidth { get; set; }
However, I don't want this as I can have multiple FormControl objects loaded at the same time and they may not all have the same scroll bar width property.
Use a RelativeSource Binding instead of ElementName:
{Binding RelativeSource={RelativeSource Mode=FindAncestor,
AncestorType={x:Type controls:FormControl}}, Path=ScrollBarWidth}
This will walk up the visual tree at runtime to find the parent control containing the ScrollViewer, which solves both your scoping and multiple instance issues.

capture events from lookless control button

I have create a lookless control to be used in a Silverlight 4 project. This control contains a button and I would like to capture the click event. The Generic.xaml contains
<Style TargetType="TU:MyControl">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TU:MyControl" >
<Border Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}" d:DesignWidth="550" d:DesignHeight="228">
<Grid Background="Silver">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="150*"/>
<ColumnDefinition Width="60"/>
<ColumnDefinition Width="150*"/>
</Grid.ColumnDefinitions>
<Border Grid.Column="0" Margin="2" BorderBrush="DarkGray" BorderThickness="3"></Border>
<Border Grid.Column="2" Margin="2" BorderBrush="DarkGray" BorderThickness="3"></Border>
<StackPanel Grid.Column="1">
<Button Name="PART_MyClick" Height="32" Width="32" Margin="0,8,0,0"></Button>
</StackPanel>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
After researching the problem I beleive that I have to add the following attribute to my control class
[TemplatePart(Name = "PART_MyClick", Type = typeof(Button))]
Then in my controls constructor I have added the following code
var myClick = GetTemplateChild("PART_MyClick") as Button;
if(myClick != null)
{
myClick.Click += (o, e) => DoThings();
}
when run though the myClick variable is always null so the event handler never gets attached. Could you please tell me where I am going wrong? Im a newbie so if this is the wrong approach completly then any advise on the correct approach would also be greatfully received
Override the OnApplyTemplate method and put your code there instead of the control's constructor:
public override void OnApplyTemplate()
{
base.OnApplyTemplate();
var myClick = GetTemplateChild("PART_MyClick") as Button;
if(myClick != null)
{
myClick.Click += (o, e) => DoThings();
}
}
Because during the constructor call the visual tree for the control is not build up yet. From MSDN OnApplyTemplate:
Attach class-defined event handlers to parts of the template. For
example, you might want class logic to handle KeyDown events from a
TextBox template part so that UI states are updated, and other events
that are specific to your control are raised instead.

TemplateBinding to RowDefinition.Height ignored in ContentControl

Description:
I have a custom content control and I am trying to enable some external settings via dependency properties. Basically it's a decorator panel with two grid rows, upper one is the header, the lower one is the content (via ContentPresenter).
There are 3 items that are bound to the template (via TemplateBinding), HeaderHeight, TextSize and Header (each of them has its dependency property of an appropriate type).
Problem:
While two of the bindings work perfectly (even in design-time), the third one does not. The FontSize="{TemplateBinding TextSize}" and the Text="{TemplateBinding Header}" bindings work, but the <RowDefinition Height="{TemplateBinding HeaderHeight}" /> does not work.
The grid splits the rows' heights 50/50, no matter which value I set the HeaderHeight property to. It does not even take the default value from the DP metadata.
Question:
What is the problem with this scenario? Why do the other two bindings work with no problems and this one behaves as if there is no binding at all?
Note:
If I set DataContext = this in the constructor and replace {TemplateBinding HeaderHeight} with {Binding HeaderHeight}, the problem disappears and it works as intended. But I'd like to know why I don't need to do the same thing with other bindings to make them work.
XAML (Themes/Generic.xaml):
<Style TargetType="local:KaiPanel">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="local:KaiPanel">
<Grid x:Name="LayoutRoot">
<Grid.RowDefinitions>
<RowDefinition Height="{TemplateBinding HeaderHeight}" />
<RowDefinition />
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<Border>
<TextBlock FontSize="{TemplateBinding TextSize}"
Text="{TemplateBinding Header}" />
</Border>
</Grid>
<Grid Grid.Row="1">
<Border>
<ContentPresenter />
</Border>
</Grid>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Content Control (C#):
public class KaiPanel : ContentControl
{
public KaiPanel()
{
this.DefaultStyleKey = typeof(KaiPanel);
}
public static readonly DependencyProperty TextSizeProperty =
DependencyProperty.Register("TextSize", typeof(double), typeof(KaiPanel), new PropertyMetadata(15.0));
public double TextSize
{
get { return (double)GetValue(TextSizeProperty); }
set { SetValue(TextSizeProperty, value); }
}
public static readonly DependencyProperty HeaderProperty =
DependencyProperty.Register("Header", typeof(String), typeof(KaiPanel), new PropertyMetadata(""));
public String Header
{
get { return (String)GetValue(HeaderProperty); }
set { SetValue(HeaderProperty, value); }
}
public static readonly DependencyProperty HeaderHeightProperty =
DependencyProperty.Register("HeaderHeight", typeof(GridLength), typeof(KaiPanel), new PropertyMetadata(new GridLength(40)));
public GridLength HeaderHeight
{
get { return (GridLength)GetValue(HeaderHeightProperty); }
set { SetValue(HeaderHeightProperty, value); }
}
}
Custom Control usage (XAML):
<UserControl ...>
<Grid x:Name="LayoutRoot">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="150" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<StackPanel x:Name="buttonsStackPanel" Grid.Column="0" VerticalAlignment="Center">
<!-- Some buttons here -->
</StackPanel>
<Grid Grid.Column="1">
<controls:KaiPanel x:Name="contentPanel">
<navigation:Frame x:Name="contentFrame" Source="KP">
<navigation:Frame.UriMapper>
<uriMapper:UriMapper>
<uriMapper:UriMapping Uri="KP" MappedUri="/Views/Kornelijepetak.xaml" />
<uriMapper:UriMapping Uri="KAI" MappedUri="/Views/KaiNetwork.xaml" />
</uriMapper:UriMapper>
</navigation:Frame.UriMapper>
</navigation:Frame>
</controls:KaiPanel>
</Grid>
</Grid>
</UserControl>
Sadly it seems what you're attempting to do requires more than just a single data binding. RowDefinition isn't a subclass of FrameworkElement, and it doesn't match any of the other criteria specified in the MSDN Silverlight data binding documentation, so it can't be used as the target of a binding.
What you want to do is possible, but unfortunately it involves a little more code.
Firstly, add a field for the main grid (I've called it mainGrid) to your KaiPanel class. Then, override the OnApplyTemplate method in this class to grab the main Grid from the template and keep a reference to it in your mainGrid field:
public override void OnApplyTemplate()
{
base.OnApplyTemplate();
mainGrid = GetTemplateChild("LayoutRoot") as Grid;
SetHeaderRowHeight();
}
This calls a method that updates the height of the first row of the grid. That method is as follows:
private void SetHeaderRowHeight()
{
if (mainGrid != null)
{
mainGrid.RowDefinitions[0].Height = HeaderHeight;
}
}
I admit I'm not 100% sure that OnApplyTemplate is called after the DPs are set. It seems that this is the case (a quick test seemed to confirm this), but all I could find to back this up was this post on the Silverlight forums. If you find that this isn't the case, you'll need to register a PropertyChangedCallback on the HeaderHeight DP that will also call this SetHeaderRowHeight method.
See also http://forums.silverlight.net/forums/t/76992.aspx#183089.
Use RelativeSource and TemplatedParent instead:
<RowDefinition Height="{Binding RelativeSource={RelativeSource TemplatedParent},
Path=HeaderHeight}" />
Here the difference between TemplateBinding and RelativeSource TemplatedParent is explained:
WPF TemplateBinding vs RelativeSource TemplatedParent

WPF popup: how to make a reusable template for popups?

Since Popup doesn't derive from Control and doesn't have a template, how can I define a template so that all popups look the same? I need to design one that has a certain look and don't want to have to copy markup each time one is used.
This seems pretty easy but I can't figure out how to do it. The Child property defines a logical tree but I don't see how you can pull that out into a template and reuse it.
I was looking to do the same thing and here is what I came up with:
I inherited from ContentPresenter, styled that control as I wanted and than placed the derived ContentPresenter inside my Popup, I only used 2 text blocks for the simplicity but it is easy to understand how any content could be added.
My custom control:
using System.Windows;
using System.Windows.Controls;
namespace CustomControls
{
[TemplatePart(Name = PART_PopupHeader, Type = typeof(TextBlock))]
[TemplatePart(Name = PART_PopupContent, Type = typeof(TextBlock))]
public class CustomPopupControl : ContentControl
{
private const string PART_PopupHeader = "PART_PopupHeader";
private const string PART_PopupContent = "PART_PopupContent";
private TextBlock _headerBlock = null;
private TextBlock _contentBlock = null;
static CustomPopupControl()
{
DefaultStyleKeyProperty.OverrideMetadata
(typeof(CustomPopupControl),
new FrameworkPropertyMetadata(typeof(CustomPopupControl)));
}
public override void OnApplyTemplate()
{
base.OnApplyTemplate();
_headerBlock = GetTemplateChild(PART_PopupHeader) as TextBlock;
_contentBlock = GetTemplateChild(PART_PopupContent) as TextBlock;
}
public static readonly DependencyProperty HeaderTextProperty =
DependencyProperty.Register("HeaderText", typeof(string), typeof(CustomPopupControl), new UIPropertyMetadata(string.Empty));
public string HeaderText
{
get
{
return (string)GetValue(HeaderTextProperty);
}
set
{
SetValue(HeaderTextProperty, value);
}
}
public static readonly DependencyProperty ContentTextProperty =
DependencyProperty.Register("ContentText", typeof(string), typeof(CustomPopupControl), new UIPropertyMetadata(string.Empty));
public string ContentText
{
get
{
return (string)GetValue(ContentTextProperty);
}
set
{
SetValue(ContentTextProperty, value);
}
}
}
}
Style for the control:
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:CustomControls">
<Style TargetType="{x:Type local:CustomPopupControl}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type local:CustomPopupControl}">
<Border CornerRadius="3" BorderThickness="1" BorderBrush="White">
<Border.Background>
<SolidColorBrush Color="#4b4b4b" Opacity="0.75"/>
</Border.Background>
<Border.Effect>
<DropShadowEffect ShadowDepth="0"
Color="White"
Opacity="1"
BlurRadius="5"/>
</Border.Effect>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBlock Text="{TemplateBinding HeaderText}"
Grid.Row="0"
Foreground="#5095d6"
FontWeight="Bold"
VerticalAlignment="Bottom"
Margin="{TemplateBinding Margin}"
HorizontalAlignment="Left"/>
<Rectangle Grid.Row="1" Stroke="AntiqueWhite" Margin="1 0"></Rectangle>
<TextBlock Grid.Row="2"
Grid.ColumnSpan="2"
x:Name="PART_TooltipContents"
Margin="5, 2"
Text="{TemplateBinding ContentText}"
TextWrapping="Wrap"
MaxWidth="200"/>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
The use of the control:
<StackPanel Grid.Row="1" Orientation="Horizontal" HorizontalAlignment="Center">
<Button x:Name="Button1" Content="Button with popup" HorizontalAlignment="Center">
</Button>
<Button x:Name="Button2" Content="Another button with popup" HorizontalAlignment="Center">
</Button>
<Popup IsOpen="True"
FlowDirection="LeftToRight"
Margin="10"
PlacementTarget="{Binding ElementName=Button1}"
Placement="top"
StaysOpen="True">
<local2:CustomPopupControl HeaderText="Some Header Text" ContentText="Content Text that could be any text needed from a binding or other source" Margin="2">
</local2:CustomPopupControl>
</Popup>
<Popup IsOpen="True"
FlowDirection="LeftToRight"
Margin="10"
PlacementTarget="{Binding ElementName=Button2}"
Placement="Bottom"
StaysOpen="True">
<local2:CustomPopupControl HeaderText="Different header text" ContentText="Some other text" Margin="2">
</local2:CustomPopupControl>
</Popup>
</StackPanel>
I tried illustrating how some properties can be constant across all controls, others can be customized per control and others could be bound to TemplatePart, here is the final result:
Depends how you want your pop-ups to behave. If they're just for displaying information in a uniform manner, than you might want to have a class that derives from Window that has the standard formats and styling wrapped around a ContentPresenter then bind the content of the presenter to a property which can represent the custom information for each pop-up.
Then its just a matter of programatically inserting whatever custom content you want before displaying the pop-up window.
Hope it helps.

Resources