Develop Reference

How to bind command on entire Grid LeftClick in WPF User Control

I want to achieve Grid Left Click inside a user control.
My WPF User Control
<Grid>
<Border Grid.Row="0" CornerRadius="7" >
<Border.Background>
<SolidColorBrush Color="#ffffff" Opacity="0.08"></SolidColorBrush>
</Border.Background>
<Grid>
<Image Source="/Assets/Images/Icon/ic-add.png" Width="70" Height="70"/>
</Grid>
</Border>
</Grid>
Here is my Window
<Grid>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
<usercontrols:CreateNewProfile Width="200" Height="235" Margin="40,40,0,0">
</usercontrols:CreateNewProfile>
</<StackPanel>
</Grid>
There is a command Called CreateNewProfile
Very straight question How to bind command on Left Click of User Control?

You can use InputBindings inside of your UserControl:
<Grid.InputBindings>
<MouseBinding MouseAction="LeftClick" Command="{Binding CreateNewProfile}"/>
</Grid.InputBindings>

Get UserControls dynamically via XamlReader.Load, IsLoaded is false at UI Elements

I try to save and load TabItems via XamlWriter and XamlReader at runtime so that the user can restore the previous session. Each TabItem consists of UserControls and standard WPF controls like grids,buttons and checkboxes.
It all works fine until I try to subscribe to events of let's say a button.
If I raise them manually with RaiseEvent() they work, but if I click on them nothing happens. Even if I set IsEnabled=false the button is displayed as enabled. LogicalTreeHelper.FindLogicalNode gives me the right button, but the Click event also won't trigger. The IsLoaded property is false, so I assume there has to be some underlying problem with the initialization.
Basically this is the code to read from the file
StreamReader sw = new StreamReader(file);
XmlReader xmlReader = XmlReader.Create(sw);
TabItem tabItem = (TabItem)XamlReader.Load(xmlReader);
.. and this to save each TabItem to a seperate xml file
foreach (TabItem tabItem in tabControlMain.Items)
{
StreamWriter sw = new StreamWriter(Path.Combine(path,tabItem.Name + ".xml"), false);
string savedTab = XamlWriter.Save(tabItem);
sw.Write(savedTab);
sw.Close();
}
Here is an example TabItem saved to a file
<TabItem IsSelected="True" Header="Test" Name="tabItem1" HorizontalAlignment="Left" VerticalAlignment="Top" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:womoc="clr-namespace:WeldOsMqttOpcClient;assembly=blabla">
<TabItem.HeaderTemplate>
<DataTemplate DataType="{x:Type TabItem}">
<TextBox Margin="0,0,30,0" Text="{Binding Path=.}" />
</DataTemplate>
</TabItem.HeaderTemplate>
<Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<womoc:UcOverviewTabPage Autoconnect="False" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Grid Name="gridParentOv">
<Grid Name="gridMqttOpcControls" Height="599.08" HorizontalAlignment="Stretch" VerticalAlignment="Top">
<womoc:UcConnection Name="ucOpc" MinWidth="400" HorizontalAlignment="Right" VerticalAlignment="Stretch">
<GroupBox Header="OPC [10.5.51.130]" Name="groupBox" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<ScrollViewer>
<Grid Name="gridTextBoxesWithValues" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Name="rowLabel" />
</Grid.RowDefinitions>
<Label Background="#FF008000" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" Name="labelConnected" Width="190" Height="26" Margin="0,0,0,0" HorizontalAlignment="Center" VerticalAlignment="Top" Grid.ColumnSpan="2">Connected!</Label>
</Grid>
</ScrollViewer>
</GroupBox>
</womoc:UcConnection>
</Grid>
<Grid Name="gridConnection" MinHeight="30" HorizontalAlignment="Stretch" VerticalAlignment="Bottom">
<Button Name="btnConnect" Width="55" Margin="100,0,0,10" HorizontalAlignment="Center" VerticalAlignment="Bottom" IsEnabled="False">Connect</Button>
<TextBox Name="tbIPAddress" Width="95" Height="18" Margin="0,0,100,10" HorizontalAlignment="Center" VerticalAlignment="Bottom" IsEnabled="False">10.5.51.130</TextBox>
<CheckBox Name="cbMqtt" Width="46" Height="15" Margin="20,0,0,10" HorizontalAlignment="Left" VerticalAlignment="Bottom" IsEnabled="False">Mqtt</CheckBox>
<CheckBox IsChecked="True" Name="cbOpc" Width="42" Margin="0,0,20,10" HorizontalAlignment="Right" VerticalAlignment="Bottom" IsEnabled="False">Opc</CheckBox>
</Grid>
</Grid>
</womoc:UcOverviewTabPage>
</Grid>
</TabItem>
UcOverviewTabPage is one of my UserControls, in which there is for example a button. I try to subscribe to the events manually ->
public UcOverviewTabPage()
{
InitializeComponent();
cbMqtt.Checked += CbMqtt_Checked;
cbMqtt.Unchecked += CbMqtt_Unchecked;
cbOpc.Checked += CbOpc_Checked;
cbOpc.Unchecked += CbOpc_Unchecked;
btnConnect.Click += BtnConnect_Click;
var children = LogicalTreeHelper.FindLogicalNode(this, "btnConnect") as Button;
bool loaded = children.IsLoaded;
// -> FALSE
}
Bear in mind, creating new custom UserControls during runtime works perfectly. The problem only occurs when reading out of the XML file.
I except the UserControls or any other Controls to work like they do when created during runtime. What am I missing?

Semitransparent background and opaque foreground wpf

I currently have the following xaml code:
<Grid
Name="rootGrid"
Opacity=".25"
Background="Black"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch">
<Border
Background="Black"
Margin="120">
<Grid
Background="White"
Margin="8">
<TextBlock
Name="popupContent">
Test
</TextBlock>
<Button
Click="Button_Click">
Test
</Button>
</Grid>
</Border>
</Grid>
Currently, the Opacity setting on the Grid is also applied on its children.
I only want this opacity to be applied on its background color, to achieve a darkening effect, not on the foreground. How can I do this?

Use a semi-transparent background, either as a SolidColorBrush like
<Grid ...>
<Grid.Background>
<SolidColorBrush Color="Black" Opacity="0.25"/>
</Grid.Background>
...
</Grid>
or by specifying an alpha value in the color, like
<Grid Background="#3F000000" ...>

The trick is to not add the Opacity to the entire Grid element:
<Grid>
<Grid.Background>
<SolidColorBrush Color="Black" Opacity=".75"/>
</Grid.Background>
<!--(Other elements)-->
</Grid>

This worked for me. I have two Grids a Root grid and RootContent sub-grid. I control the Opacity of the RootContent. Any controls in the "Root" will not be effected.
<Grid x:Name="Root" KeyDown="Root_KeyDown" Tapped="Root_Tapped">
<!--(Other elements)-->
<Grid x:Name="RootContent">
<!--(Other elements)-->
</Grid>
</Grid>

The opacity will always apply to children, so I tend to use a Canvas at the same level to achieve this affect:
<Grid>
<Canvas Opacity=".25"
Background="Black"/>
<Grid Name="rootGrid"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch">
<Border
Background="Black"
Margin="120">
<Grid
Background="White"
Margin="8">
<TextBlock
Name="popupContent">
Test
</TextBlock>
<Button
Click="Button_Click">
Test
</Button>
</Grid>
</Border>
</Grid>
</Grid>

Frame doesn't work anymore after adding template

I'm trying to learn WPF, I created a resource dictionary with a template for my Frame but after adding the template the Frame doesn't display my Pages anymore. When I remove the template, everything works again (the pages are properly displayed). What am I doing wrong?
ResourceDictionary.xaml (just very basic)
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<ControlTemplate x:Key="frameTemplate" TargetType="{x:Type Frame}">
<Grid>
<Border BorderBrush="Tomato" BorderThickness="3" Background="Bisque"/>
</Grid>
</ControlTemplate>
</ResourceDictionary>
MainWindow.xaml
<Window.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="/Resources/Icons.xaml" />
<ResourceDictionary Source="ResourceDictionary.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Window.Resources>
<Controls:MetroWindow.RightWindowCommands>
<Controls:WindowCommands>
<ToggleButton Content="Menu"
IsChecked="{Binding ElementName=Flyout, Path=IsOpen}" Cursor="Hand"/>
</Controls:WindowCommands>
</Controls:MetroWindow.RightWindowCommands>
<Grid>
<Grid x:Name="menu_grid">
</Grid>
<!-- flyout here, the title bar is not overlapped -->
<Controls:Flyout x:Name="Flyout"
Width="200"
Header="Menu"
IsOpen="True"
Position="Left">
<StackPanel>
<Button HorizontalContentAlignment="Center" VerticalAlignment="Center" Margin="10" Click="DriverButton_Click">
<StackPanel Orientation="Horizontal">
<Rectangle Height="16" Width="16" Margin="5">
<Rectangle.Fill>
<VisualBrush Visual="{StaticResource appbar_people}" Stretch="Fill" />
</Rectangle.Fill>
</Rectangle>
<TextBlock VerticalAlignment="Center" HorizontalAlignment="Center">Drivers</TextBlock>
</StackPanel>
</Button>
<Button HorizontalContentAlignment="Center" VerticalAlignment="Center" Margin="10" Click="SeasonButton_Click">
<StackPanel Orientation="Horizontal">
<Rectangle Height="16" Width="16" Margin="5">
<Rectangle.Fill>
<VisualBrush Visual="{StaticResource appbar_calendar}" Stretch="Fill" />
</Rectangle.Fill>
</Rectangle>
<TextBlock VerticalAlignment="Center" HorizontalAlignment="Center">Seasons</TextBlock>
</StackPanel>
</Button>
<Button HorizontalContentAlignment="Center" VerticalAlignment="Center" Margin="10" Click="ConstructorsButton_Click">
<StackPanel Orientation="Horizontal">
<Rectangle Height="16" Width="16" Margin="5">
<Rectangle.Fill>
<VisualBrush Visual="{StaticResource appbar_team}" Stretch="Fill" />
</Rectangle.Fill>
</Rectangle>
<TextBlock VerticalAlignment="Center" HorizontalAlignment="Center">Constructors</TextBlock>
</StackPanel>
</Button>
</StackPanel>
</Controls:Flyout>
<Grid Margin="200 0 0 0">
<Frame x:Name="_mainFrame" Template="{StaticResource frameTemplate}" />
</Grid>
</Grid>
MainWindow.xaml.cs
public partial class MainWindow
{
DriversPage driversPage = new DriversPage();
SeasonPage seasonsPage = new SeasonPage();
ConstructorsPage constructorsPage = new ConstructorsPage();
public MainWindow()
{
InitializeComponent();
}
private void DriverButton_Click(object sender, RoutedEventArgs e)
{
_mainFrame.Navigate(driversPage);
}
private void SeasonButton_Click(object sender, RoutedEventArgs e)
{
_mainFrame.Navigate(seasonsPage);
}
private void ConstructorsButton_Click(object sender, RoutedEventArgs e)
{
_mainFrame.Navigate(constructorsPage);
}
}

When you override a ControlTemplate, you need to supply the entire template for the control. You are only supplying a Grid with a Border in it, so that is all that is going to render. If you look at the example template for Frame, you will see there is a lot more there. I suspect the important piece that you need to display the page is probably the content presenter named "PART_FrameCP". Try adding that to your template.
<ContentPresenter x:Name="PART_FrameCP" />
Named parts are usually important in templates because the control will look for them. Sometimes, unnamed parts are also searched for by type and therefore may be important as well. It is a good idea to read and understand the example template when creating a template of your own.

Canvas ImageSource not showing image

Here is my xaml:
<StackPanel Height="333">
<Canvas x:Name="imageCanvas"
RenderOptions.BitmapScalingMode="NearestNeighbor"
RenderOptions.EdgeMode="Aliased">
<Canvas.Background>
<ImageBrush x:Name="image1"
Stretch="None"
AlignmentX="Left"
AlignmentY="Top">
</ImageBrush>
</Canvas.Background>
</Canvas>
<Canvas x:Name="overlayCanvas">
<Rectangle Name="dummyRectangle" Width="1" Height="2" Fill="Transparent" />
</Canvas>
</StackPanel>
Here is my C# code behind:
void PlayImages()
{
string testImageFolder = "C:\\TestImages";
DirectoryInfo d = new DirectoryInfo(testImageFolder);//Assuming Test is your Folder
FileInfo[] Files = d.GetFiles("*.tif"); //Getting Text files
image1.ImageSource = new BitmapImage(new Uri("C:\\TestImages\\ChanA_0001_0001_0001_0001.tif"));
}
However, when the C# code above executed, nothing happened on UI. I am wondering where should I change to make the image show up? Thanks.

It was the stack panel that causes the problem. I am not sure why, but if some of them are removed, then the image shows up. The xaml with some stack penal removed is like following:
<StackPanel HorizontalAlignment="Left">
<!--Controls:MenuControl/-->
<Controls:ToggleButtonControl Margin="0,0,0,0" Height="43" RenderTransformOrigin="0.5,-0.233" />
</StackPanel>
<Canvas x:Name="imageCanvas"
RenderOptions.BitmapScalingMode="NearestNeighbor"
RenderOptions.EdgeMode="Aliased" Margin="0,52,0,0">
<Canvas.Background>
<ImageBrush x:Name="image1"
Stretch="None"
AlignmentX="Left"
AlignmentY="Top"
ImageSource="{Binding Path=Bitmap, Mode=OneWay, UpdateSourceTrigger=PropertyChanged}">
</ImageBrush>
</Canvas.Background>
</Canvas>

Your imageCanvas always has width and height zero, because you neither add any children, not set its Width or Height explicitly.
Change your XAML to use only one Canvas instead, and optionally (depending on the outer container and the children to be added) set its Width and Height properties:
<Canvas x:Name="overlayCanvas" Height="333" Width="500">
<Canvas.Background>
<ImageBrush x:Name="image1" ... />
</Canvas.Background>
<Rectangle ... />
</Canvas>