Copy and paste in Silverlight - silverlight

How can I disable the copy and paste functionality in a Silverlight textblock?

I will assume that you mean TextBox rather than TextBlock as the latter doesn't provide cut and paste.
I think the easiest way to do this will be to derive from TextBox and override the key handling to prevent clipboard operation shortcuts. You would need to extend this basic solution if you wanted I18N support to allow for different shortcuts on different systems, but for the standard Ctrl+V, Ctrl+C (or Apple+C and Apple+V on Macs), this should work. You may also want to consider Ctrl+Ins as an alternative to Ctrl+V (I'm not certain Silverlight supports this, but it might).

Regarding the question above, the following article might help...
Custom Silverlight TextBox with contextmenu (Cut, Copy, Paste and Delete)
http://www.codeproject.com/KB/silverlight/SLCusTxtBox.aspx

The answer here is not the one you're going to want to hear but it's the most correct way IMHO.
TextBlock doesn't support copy/paste. Neither does the Label. I seem to remember this being down to the way that they get rendered to the screen.
The best way I'm aware of is to use a TextBox and style it so it looks like a TextBlock or a Label.
Here's a nice simple style for you to try out and modify - It should do the job okay.
<Style x:Key="ReadonlyTextBox" TargetType="TextBox">
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Background" Value="#FFFFFFFF"/>
<Setter Property="Foreground" Value="#FF000000"/>
<Setter Property="Padding" Value="2"/>
<Setter Property="IsReadOnly" Value="True"/>
<Setter Property="BorderBrush">
<Setter.Value>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFA3AEB9" Offset="0"/>
<GradientStop Color="#FF8399A9" Offset="0.375"/>
<GradientStop Color="#FF718597" Offset="0.375"/>
<GradientStop Color="#FF617584" Offset="1"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TextBox">
<Grid x:Name="RootElement">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver"/>
<VisualState x:Name="Disabled"/>
<VisualState x:Name="ReadOnly">
<Storyboard>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="ReadOnlyVisualElement"/>
<ColorAnimation Duration="0" To="#00C9C9C9" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" Storyboard.TargetName="ReadOnlyVisualElement" d:IsOptimized="True"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused"/>
<VisualState x:Name="Unfocused"/>
</VisualStateGroup>
<VisualStateGroup x:Name="ValidationStates">
<VisualState x:Name="Valid"/>
<VisualState x:Name="InvalidUnfocused"/>
<VisualState x:Name="InvalidFocused"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="Border" CornerRadius="1" Opacity="1">
<Grid>
<Border x:Name="ReadOnlyVisualElement" Background="#5EC9C9C9" Opacity="0"/>
<ScrollViewer x:Name="ContentElement" BorderThickness="0" IsTabStop="False" Padding="{TemplateBinding Padding}" Margin="1,1,-1,1"/>
</Grid>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Now you've just got a bunch of Find & Replace to get busy with :-)

Related

Highlight selected bar in different color in wpf

I have a WPF application where I have a bar chart.
By default the color of bar is steel blue.
I want a functionality where when a users selects a bar, it should be highlighted in a different color i.e. red to indicate that is the product referring to. Please guide me how can I achieve this.
Currently I have used the following columndatapoint style.
<Style
x:Key="MyColumnDataPointStyle"
TargetType="charting:ColumnDataPoint">
<Setter Property="Background" Value="SteelBlue"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="charting:ColumnDataPoint">
<Border
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Opacity="1"
x:Name="Root">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.1"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="MouseOverHighlight"
Storyboard.TargetProperty="Opacity"
To="0.6"
Duration="0"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="SelectionStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.1"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Unselected"/>
<VisualState x:Name="Selected">
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="SelectionHighlight"
Storyboard.TargetProperty="Opacity"
To="0.6"
Duration="0"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="RevealStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.5"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Shown">
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="Root"
Storyboard.TargetProperty="Opacity"
To="1"
Duration="0"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Hidden">
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="Root"
Storyboard.TargetProperty="Opacity"
To="0"
Duration="0"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid
Background="{TemplateBinding Background}">
<Rectangle>
<Rectangle.Fill>
<LinearGradientBrush>
<GradientStop
Color="#77ffffff"
Offset="0"/>
<GradientStop
Color="#00ffffff"
Offset="1"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Border
BorderBrush="#ccffffff"
BorderThickness="1">
<Border
BorderBrush="#77ffffff"
BorderThickness="1"/>
</Border>
<Rectangle x:Name="SelectionHighlight" Fill="Red" Opacity="0"/>
<Rectangle x:Name="MouseOverHighlight" Fill="White" Opacity="0"/>
</Grid>
<ToolTipService.ToolTip>
<StackPanel>
<ContentControl
Content="{TemplateBinding FormattedIndependentValue}"
FontWeight="Bold"/>
<ContentControl
Content="{TemplateBinding FormattedDependentValue}"/>
</StackPanel>
</ToolTipService.ToolTip>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
To do this in the MVVM pattern I would create a ViewModel class for your ColumnDataPoint.
This ViewModel contains a bool property e.g. called IsActive.
You can then bind the bar's DataContext to that ViewModel and in your style you can set a DataTrigger bound to that property.
To change that property you can create a command in your ViewModel which will be executed when clicking the bar
Here is a small example:
<Rectangle Fill="SteelBlue"
DataContext="{Binding YourViewModel}">
<Rectangle.Style>
<Style TargetType="Rectangle">
<Style.Triggers>
<DataTrigger Binding="{Binding IsActive}" Value="true">
<Setter Property="Stroke" Value="Chartreuse"/>
<Setter Property="StrokeThickness" Value="5"/>
</DataTrigger>
</Style.Triggers>
</Style>
</Rectangle.Style>
<i:Interaction.Triggers>
<i:EventTrigger EventName="MouseLeftButtonUp">
<command:EventToCommand Command="{Binding ClickingBarCommand}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</Rectangle>
To use the "i" and "command" namespace you have to add
xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
xmlns:command="http://www.galasoft.ch/mvvmlight"
Hopefully this was helpful to you
cheers

WPF Button Style Background hidding Foreground

I'm trying to understand the basics of styling controls with templates but even though there are a lot of samples I'm still stuck with some basics.
I wish to style a button with a custom background, therefore I set a border with a background property changing on VisualState "MouseOver". The problem is, since I set the color on the border, I can't find find how to set my text foreground property to white so that the text is visible.
Here's my xaml:
<Style TargetType="{x:Type Button}">
<Setter Property="Foreground" Value="White"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border Name="RootElement">
<Border.Background>
<LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
<GradientStop Offset="0" Color="Black" />
<GradientStop Offset="1" Color="SteelBlue" />
</LinearGradientBrush>
</Border.Background>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="MouseOver">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetName="RootElement" Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)">
<EasingColorKeyFrame KeyTime="0" Value="LightSteelBlue" />
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
The setter on Foreground property seems to be overriden by the border background property.
I think I have to add a textblock to the template, but I'm sure how to link the actual Text of the button to the textBlock, this is what I tried without succes:
<Style TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border Name="RootElement">
<Border.Background>
<LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
<GradientStop Offset="0" Color="Black" />
<GradientStop Offset="1" Color="SteelBlue" />
</LinearGradientBrush>
</Border.Background>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="MouseOver">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetName="RootElement" Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)">
<EasingColorKeyFrame KeyTime="0" Value="LightSteelBlue" />
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<TextBlock Name="ButtonText" Text="{TemplateBinding Content}">
<TextBlock.Foreground>
<SolidColorBrush Color="White"/>
</TextBlock.Foreground>
</TextBlock>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
You are correct that you need to add something to present the text in the Button, a simple ContentPrsenter inside the border should do.
<Style TargetType="{x:Type Button}">
<Setter Property="Foreground" Value="White"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border Name="RootElement">
<Border.Background>
<LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
<GradientStop Offset="0" Color="Black" />
<GradientStop Offset="1" Color="SteelBlue" />
</LinearGradientBrush>
</Border.Background>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="MouseOver">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetName="RootElement" Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)">
<EasingColorKeyFrame KeyTime="0" Value="LightSteelBlue" />
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentPresenter/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
If you want more control over what displays the content you could add something like a Label and bind to the Content property of the button.
<Style TargetType="{x:Type Button}">
<Setter Property="Foreground" Value="White"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border Name="RootElement">
<Border.Background>
<LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
<GradientStop Offset="0" Color="Black" />
<GradientStop Offset="1" Color="SteelBlue" />
</LinearGradientBrush>
</Border.Background>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="MouseOver">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetName="RootElement" Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)">
<EasingColorKeyFrame KeyTime="0" Value="LightSteelBlue" />
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Label Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

Silverlight - button does not change a color

I want to have the following behaviour - when user mouse over on button, text inside button change color. I create the following style + template:
<Style TargetType="blib:ButtonWithImage">
<Setter Property="Background">
<Setter.Value>
<ImageBrush ImageSource="images/buttonBackground.png"></ImageBrush>
</Setter.Value>
</Setter>
<Setter Property="Width" Value="173"></Setter>
<Setter Property="Height" Value="40"></Setter>
<Setter Property="Foreground" Value="#FF000000"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="BorderBrush">
<Setter.Value>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFA3AEB9" Offset="0"/>
<GradientStop Color="#FF8399A9" Offset="0.375"/>
<GradientStop Color="#FF718597" Offset="0.375"/>
<GradientStop Color="#FF617584" Offset="1"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="blib:ButtonWithImage">
<Border x:Name="Background" CornerRadius="0" Background="Transparent" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}">
<Grid Background="{TemplateBinding Background}">
<vsm:VisualStateManager.VisualStateGroups>
<vsm:VisualStateGroup x:Name="CommonStates">
<vsm:VisualState x:Name="Normal"/>
<vsm:VisualState x:Name="MouseOver">
<Storyboard>
<ColorAnimation Duration="0" Storyboard.TargetName="Text" Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)" To="#D8FFFFFF"></ColorAnimation>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="Pressed">
<Storyboard>
<ColorAnimation Duration="0" Storyboard.TargetName="Text" Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)" To="#D8FFFFFF"></ColorAnimation>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation Duration="0" Storyboard.TargetName="DisabledVisualElement" Storyboard.TargetProperty="Opacity" To=".55"/>
</Storyboard>
</vsm:VisualState>
</vsm:VisualStateGroup>
<vsm:VisualStateGroup x:Name="FocusStates">
<vsm:VisualState x:Name="Focused">
<Storyboard>
<DoubleAnimation Duration="0" Storyboard.TargetName="FocusVisualElement" Storyboard.TargetProperty="Opacity" To="1"/>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="Unfocused" />
</vsm:VisualStateGroup>
</vsm:VisualStateManager.VisualStateGroups>
<StackPanel Height="Auto" Orientation="Horizontal" Margin="10,3,10,3">
<Image Source="{TemplateBinding ImageSource}" Width="24" Height="24" Stretch="Fill"/>
<TextBlock x:Name="Text" Text="{TemplateBinding Content}" HorizontalAlignment="Left" FontWeight="Bold" Margin="5,0,0,0" VerticalAlignment="Center" FontSize="12" FontFamily="Arial" Foreground="#FFFFF6BB" />
</StackPanel>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
but it does not work. Why?
The VisualStateManager.VisualStateGroups property should be attached to the root element in the Template which in this case is Border with the name "Background". Currently you have it on the Grid inside the border but the VisualStateManager won't find it.
Also your ButtonWithImage class must be derived from Button (unless you have your own code to call GoToState) but I suspect you have that already.

Custom buttons in silverlight

How can I create buttons like this in silverlight. Do I need expression blend for this.
Since I need to use the modified buttons at many places in my application, should I do it as a user control?
You don't need a UserControl for this, just a custom Button template as a style resource, which then you can reuse by setting the style on any Button instance.
While it's doable without Blend, I highly recommend you at least get the trial, it's a really really nice IDE for design / visual development!
Edit: As a little present here's a starting point :)
<Style x:Key="ButtonStyle1" TargetType="Button">
<Setter Property="Foreground" Value="#FFFFFFFF"/>
<Setter Property="Padding" Value="3"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="BorderBrush" Value="#FF000000"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver"/>
<VisualState x:Name="Pressed"/>
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation Duration="0" To="0.4" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="DisabledVisualElement"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused">
<Storyboard>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="FocusVisualElement"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Unfocused"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="Background" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
<Border.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF707070" Offset="0"/>
<GradientStop Color="#FF666666" Offset="0.49"/>
<GradientStop Color="#FF5e5e5e" Offset="0.51"/>
<GradientStop Color="#FF535353" Offset="1"/>
</LinearGradientBrush>
</Border.Background>
</Border>
<ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
<ContentPresenter.Effect>
<DropShadowEffect BlurRadius="3" ShadowDepth="2" Opacity="0.5"/>
</ContentPresenter.Effect>
</ContentPresenter>
<Rectangle x:Name="DisabledVisualElement" Fill="#FFFFFFFF" IsHitTestVisible="false" Opacity="0"/>
<Rectangle x:Name="FocusVisualElement" IsHitTestVisible="false" Margin="1" Opacity="0" Stroke="#FF6DBDD1" StrokeThickness="1"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
You can do it without Blend by hand, but believe me, using Blend will give you a lot more power and you'll get more amazing results in the fraction of time you would need if you decided to do it all by yourself.
I'd definitely recommend Blend as it saves so much time when styling controls and creating templates.
However, if you're not set on having the buttons exactly the same as the image, there are several themes that you could use (such as JetPack) from which you could borrow the templates and amend the colours relatively easily in XAML.

How to reset a silverlight control's visual state back to "Normal" on change of visibility

I have a problem with a button control with rolloever effect. I am collapsing the button on click and later it becomes visible again, but the Mouse Hover state doesn't change back to Normal when the button becomes visible. However the issue can be resolved by changing the visual state in code but I w'd like to know if there is a way to do it in the control template?
Here is my template:
<Style x:Key="replayButton" TargetType="Button">
<Setter Property="Background" Value="#FF1F3B53"/>
<Setter Property="Foreground" Value="#FF000000"/>
<Setter Property="Padding" Value="3"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="BorderBrush">
<Setter.Value>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFA3AEB9" Offset="0"/>
<GradientStop Color="#FF8399A9" Offset="0.375"/>
<GradientStop Color="#FF718597" Offset="0.375"/>
<GradientStop Color="#FF617584" Offset="1"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid Cursor="Hand" Height="48" Margin="0,0,0,0" Width="48">
<vsm:VisualStateManager.VisualStateGroups>
<vsm:VisualStateGroup x:Name="CommonStates">
<vsm:VisualState x:Name="Normal">
<Storyboard Storyboard.TargetName="bgImg" Storyboard.TargetProperty="Source">
<ObjectAnimationUsingKeyFrames>
<DiscreteObjectKeyFrame KeyTime="0" Value="images/repeat.png"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="MouseOver">
<Storyboard Storyboard.TargetName="bgImg" Storyboard.TargetProperty="Source">
<ObjectAnimationUsingKeyFrames>
<DiscreteObjectKeyFrame KeyTime="0" Value="images/repeat-hover.png"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="Pressed">
<Storyboard Storyboard.TargetName="bgImg" Storyboard.TargetProperty="Source">
<ObjectAnimationUsingKeyFrames>
<DiscreteObjectKeyFrame KeyTime="0" Value="images/repeat-hover.png"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="Disabled">
<Storyboard/>
</vsm:VisualState>
</vsm:VisualStateGroup>
<vsm:VisualStateGroup x:Name="FocusStates">
<vsm:VisualState x:Name="Focused">
<Storyboard/>
</vsm:VisualState>
</vsm:VisualStateGroup>
</vsm:VisualStateManager.VisualStateGroups>
<Border Height="48" Margin="0,0,0,0" x:Name="Background" Width="48" Background="{x:Null}" CornerRadius="0,0,0,0">
<Grid Height="48" Margin="0,0,0,0" Width="48">
<Image x:Name="bgImg" Height="48" Margin="0,0,0,0" VerticalAlignment="Bottom" Source="images/repeat.png" Stretch="Fill" Width="48"/>
</Grid>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
VisualStateManager.GoToState(myControl, "Normal", true) on visibility change.
You can subscribe to the VisibilityChanged event

Resources