Develop Reference

Changing ToggleSwitch ON-Color Dynamically in Universal Windows Application

I have A Toggle Switch in my page, when its status is ON ,its color is same as my theme color. First I need to change its color when is ON.
Second, I want to change color dynamically in C# code, by calling function.
I can change background color with following code but I could not find a way to change its ON-Color
public void ChangeTogSwColor(Windows.UI.Color _color)
{
mySwitch.Background = _color;
}
thank you

This can be done by overriding the ToggleSwitch's default style.
First, go grab the style from here and put it in your App.xaml. After that, locate an element called SwitchKnobBounds -
<Rectangle x:Name="SwitchKnobBounds"
Fill="{ThemeResource ToggleSwitchFillOn}"
Stroke="{ThemeResource ToggleSwitchStrokeOn}"
StrokeThickness="{ThemeResource ToggleSwitchOnStrokeThickness}"
Width="44" Height="20" Opacity="0" RadiusY="10" Grid.Row="2" RadiusX="10" />
This is the element that represents the border and background of the ToggleSwitch. To change the background color, you can simply replace ToggleSwitchFillOn with whatever color you like.
However, since you also want to update it dymanically in code, you should have the Fill property to bind to an existing dependency property of the ToggleSwitch control (otherwise you need to extend the control and add your own dependency properties).
I personally would use Background and replace Background="{TemplateBinding Background}" with Background="Transparent" from the top level Grid 'cause I never realy needed to give the control a different background color other than transparent.
Then, your Rectangle would look something like this -
<Rectangle x:Name="SwitchKnobBounds"
Fill="{TemplateBinding Background}"
Stroke="{ThemeResource ToggleSwitchStrokeOn}"
StrokeThickness="{ThemeResource ToggleSwitchOnStrokeThickness}"
Width="44" Height="20" Opacity="0" RadiusY="10" Grid.Row="2" RadiusX="10" />
Finally, you can set the Background color of the On state directly in XAML or in code.
<ToggleSwitch x:Name="MyToggle" Background="Green" />
or
MyToggle.Background = Colors.Red;

WPF Copied Button Click not firing

I'm quite new to c# wpf and have a problem.
I have used the answer from this post to duplicate a Grid control. The grid control contains a button. It looks like it is being duplicated correctly.
When the original control's button is pressed, the click event is handled which calls a method in the window's code.
When the copy of the control's button is pressed, the click event is not fired and the method is not called. This is confusing me as I want it to call that same method.
Maybe the event handling data is not being copied properly? Is there a way around this?
Both the origional grid and copied grid (containing the buttons) are children of another grid.
Edit:
This is the xaml for the origional grid which contains a button:
<Grid Name="TempTab" DockPanel.Dock="Left" HorizontalAlignment="Left" Margin="5,5,5,0">
<Rectangle Fill="Black" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Stroke ="White" Margin="0,0,-2,0">
</Rectangle>
<Grid>
<DockPanel LastChildFill="False">
<TextBlock Foreground="White" HorizontalAlignment="Left" VerticalAlignment="Bottom" Margin="3,0,3,3">Some Text</TextBlock>
<Button Width="50" BorderBrush="{x:Null}" Foreground="{x:Null}" BorderThickness="0" Margin="3,0,0,0" Click="tabdowntest">
<Button.Background>
<ImageBrush ImageSource="TopMenuBar_Close.png" Stretch="Uniform"/>
</Button.Background>
</Button>
</DockPanel>
</Grid>
</Grid>
This grid is a child of a DockPanel with name 'TabsDock'.
It is being copied with the following code:
string gridXaml = XamlWriter.Save(TempTab);
StringReader stringReader = new StringReader(gridXaml);
XmlReader xmlReader = XmlReader.Create(stringReader);
Grid newTab = (Grid)XamlReader.Load(xmlReader);
TabsDock.Children.Add(newTab);
This is the code for the 'Click' event handler which should be called when the either the origional or the copied button's are pressed. But it is only called for the origional:
private void tabdowntest(object sender, MouseButtonEventArgs e)
{
Console.WriteLine("Button Pressed");
}

The bindigs are not set, you need to set them (comment in the orig post):
To be clear, this is only half the solution (as it stood back in 08). This will cause bindings to be evaluated and the results be serialized. If you wish to preserve bindings (as the question asked) you must either add a ExpressionConverter to the Binding type at runtime (see the second part of my question for the relevant link) or see my own answer below for how to do it in 4.0.

How do I add a background image to LayoutDocumentPane?

I have created a Resource for the ImageBrush, see below, but I do not know how I would add it to the AvalonDock LayoutDocumentPane. I want to add it to the pane because I want to have a logo in the background, but LayoutDocumentPane covers the Window background.
<BitmapImage x:Key="LogoBitmap" UriSource="pack://application:,,,/myLibrary;component/myImages/myBigLogo.PNG"/>
<ImageBrush x:Key="LogoImage" ImageSource="{StaticResource LogoBitmap}"/>
Right now, I have the following:
<ad:DockingManager x:Name="dockManager" >
<ad:LayoutRoot>
<ad:LayoutPanel x:Name="myLayoutPanel" Orientation="Horizontal">
<ad:LayoutAnchorablePane x:Name="myLayoutAnchorablePane" DockWidth="400"/>
<ad:LayoutDocumentPane x:Name="myDocumentPane"/>
</ad:LayoutPanel>
</ad:LayoutRoot>
</ad:DockingManager>

I was able to find a method of setting a background image that works for my use case, but I am using a very simple AvalonDock configuration so I'm not sure if it will work for you.
This will set the image for the entire dock control, I was not able to find any way to set a background at any level lower than this.
<xcad:DockingManager x:Name="dockingManager">
<xcad:DockingManager.Background>
<ImageBrush ImageSource="/Resources/Images/MDIBACKGROUNDIMAGE.png"/>
</xcad:DockingManager.Background>
<xcad:LayoutRoot>
<xcad:LayoutPanel Orientation="Horizontal">
<xcad:LayoutDocumentPaneGroup>
<xcad:LayoutDocumentPane >
<xcad:LayoutDocument>
<views:MyForm></views:MyForm>
</xcad:LayoutDocument>
</xcad:LayoutDocumentPane>
</xcad:LayoutDocumentPaneGroup>
</xcad:LayoutPanel>
</xcad:LayoutRoot>
</xcad:DockingManager>

Bing Maps (Silverlight) maps - specifying canvas to be at foreground through XAML

Below is the XAML code i have for a Bing Maps Silverlight weather related implementation.
Here is what i am trying to do:
Have a bing maps with several (over 100) pushpins- on mouseover - show a contentpopup (canvas=myPopup) below. Simple enough.
Everything works fine - however, when mypopup displays on mouseover, it is not on the foreground (the other pins appear on top of the contentpopup) - hence making it not very readable.
Question:
How do i specifiy the myPopup canvas specified in XAML below to always appear in the foreground, i.e. top most of the Bing Maps silverlight control when a user views it on mouseover.
Thanks!
<Grid x:Name="LayoutRoot" Background="White">
<m:Map x:Name="GlobalMap" Mode="Road" Center="15,7" ZoomLevel="2" CredentialsProvider="{StaticResource MyCredentials}" Margin="-70,-40,-100,-72">
<m:MapLayer x:Name="myLayer">
<Canvas x:Name="myPopup" Visibility="Collapsed" Opacity="1">
<Rectangle x:Name="myPopupRectangle" Fill="White" Canvas.Left="0" Canvas.Top="0" Height="100"
Width="100" RadiusX="15" RadiusY="15"/>
<StackPanel Canvas.Left="8" Canvas.Top="8">
<TextBlock x:Name="myPopupTexts" FontSize="5" Width="100">
</TextBlock>
</StackPanel>
</Canvas>
</m:MapLayer>
</m:Map>
</Grid>

Try adding Canvas.ZIndex to the MapLayer element, give it a large value like 200 or add your push pins to another MapLayer (rather than adding the pins directly to the map) that appears ahead of this popup layer in document order.

I did something similar to this, but took a different approach. What I did was create a custom pushpin template and create a PopUp within the template.
When the user hovers over the pushpin, the popup is displayed. Using the PopUp will solve your problem, since the control will automatically position it on top of everything. Try wrapping the Canvas in a PopPup and see if that works.
hth

ControlTemplate

I am quite new to WPF and have a basic question :
Assume the following is xaml declaration in my xaml file
<ContentControl x:Name="interactionActivityContent" Loaded="interactionActivityContent_Loaded">
<shapes:BaseShape.DragThumbTemplate >
<ControlTemplate x:Name="interactionActivityTemplate">
<Grid AllowDrop="True" x:Name="GridTest" >
<Rectangle Name="Interaction" Fill="Yellow" Stroke="Green" StrokeThickness="2" IsHitTestVisible="True" AllowDrop="True"></Rectangle>
<local:DesignerCanvas x:Name="ActivitiesCanvasArea" Margin="1,1,1,1" IsHitTestVisible="True" AllowDrop="True" Background="Blue"></local:DesignerCanvas>
</Grid>
</ControlTemplate>
</shapes:BaseShape.DragThumbTemplate>
*shapes:BaseShape.DragThumbTemplate is coming from some different class.
*DesignerCanvas is my own custom canvas for which I want to set value at run time.
How can I access ActivitiesCanvasArea in my C# code from the code behind file?
Do I need to change the way xaml is declared. I need to apply DragThumbTemplate to my grid so that I can move around grid on main screen.

From http://blogs.msdn.com/b/wpfsdk/archive/2007/03/16/how-do-i-programmatically-interact-with-template-generated-elements-part-i.aspx
If you need to find a named element in the ControlTemplate of myButton1, like the Grid, you can use Template.FindName like so:
// Finding the grid generated by the ControlTemplate of the Button
Grid gridInTemplate = (Grid)myButton1.Template.FindName("grid", myButton1);