how to access the grids on silverlight - silverlight

I have a button called test button an when I click on it I want to show a grid whose visbility is set to 0
I created a mouse button event (below) but my Grid (testGrid) is not available in the project.
private void testButton(object sender, System.Windows.Input.MouseButtonEventArgs e)
{
testGrid.Opacity = 1;
}
it highlights testGrid red
new to SL so not sure whats going on here
** EDIT **
xml for the Grid
<Grid x:Name="testGrid" HorizontalAlignment="Left" Width="150" Margin="950,-77,0,0" Height="77" VerticalAlignment="Top" Opacity="0">
</Grid>
<Image x:Name="testButton" HorizontalAlignment="Right" Margin="0,1,180,3" Stretch="Fill" Width="53" Height="49" Cursor="Hand" Opacity="0.8" >

The reason that your grid might not be accessibly in the .cs file is if you have changed the class name in the .cs file, but not in the Xaml directive at the top of your .xaml file.
If these two mis match, visual studio won't be able to link up the two files and so you wouldn't be able to see the grid control in the code behind.
Other items with your code to consider:
Though Opacity will work an alternative I use more often is:
This will show the grid.
testGrid.Visibility = Visibility.Visible;
This will hide the grid.
testGrid.Visibility = Visibility.Collapsed;
Also, Your "Button" is an Image tag and not a button. It is an image with the same name as the method you are trying to call. You will either need to change your Image to allow for an on click event or change it to a button, something like
<Button Click="TestBUtton" Text="MyButton" />
And I'd enter that in the Xaml directly so that when you type in the click event handler it auto generates the method in the code behind for you.

try this:
On XAML
<Grid x:Name="testGrid" HorizontalAlignment="Left" Width="150" Margin="950,-77,0,0" Height="77" VerticalAlignment="Top" Opacity="0">
</Grid>
<Image x:Name="testButton" HorizontalAlignment="Right" Margin="0,1,180,3" Stretch="Fill" Width="53" Height="49" Cursor="Hand" Opacity="0.8" MouseLeftButtonDown="testButton" />
on the cs
private void testButton(object sender, System.Windows.Input.MouseButtonEventArgs e){
testGrid.Visibility = Visibility.Visible;
}

Related

C# WPF MaterialDesign In Xaml Toolkit DialogHost. The background window behind the dialog box is not darkened

The background window is not darkened when DialogHost is called, meaning the dialog is not modal. The back window remains active. Although in the Github example works correctly. I don't know where I'm going.
XAML:
<materialDesign:DialogHost x:Name="DH_getLoadingList"
HorizontalAlignment="Center"
VerticalAlignment="Center"
CloseOnClickAway="True"
OverlayBackground="{DynamicResource PrimaryHueDarkBrush}" DialogTheme="Inherit" Grid.RowSpan="5" Grid.ColumnSpan="5">
<materialDesign:DialogHost.DialogContent>
<StackPanel Margin="16" Orientation="Vertical">
<Label Content="The row will be deleted." FontSize="16" />
<StackPanel Orientation="Horizontal">
<Button Content="OK" Style="{DynamicResource MaterialDesignFlatButton}" IsDefault="True" Margin="0,8,8,0" />
<Button Content="Cancel" Style="{DynamicResource MaterialDesignFlatButton}" Margin="0,8,8,0" />
</StackPanel>
</StackPanel>
</materialDesign:DialogHost.DialogContent>
</materialDesign:DialogHost>
C# code:
private void GettingFuelListCommand_Executed(object sender, ExecutedRoutedEventArgs e)
{
DH_getLoadingList.IsOpen = true;
}
UPDATED
I just had a misunderstanding the DialogHost structure. The correct way is
<Window>
<materialDesign:DialogHost>
<materialDesign:DialogHost.DialogContent>
<--! dialog content ... -->
</materialDesign:DialogHost.DialogContent>
<--! the correct location of the page content ... -->
</materialDesign:DialogHost>
<--! incorrect location of the page content ... -->
<Window/>
I know this is more than a year late. But when you put these properties:
HorizontalAlignment="Center"
VerticalAlignment="Center"
The overlay background will not appear, if you remove these, the problem will go away. The dialog will always be centered so don't need to worry about it's relative position to it's parent container.

Detect mouse left button down (Click) outside a border WPF MVVM

I have a border in MVVM. What I am trying to achieve is to detect mouse left button down outside the border and then hide it. I can do it within the MouseLeftButtonDown event for main window, but I do not know if it is the best solution. How could I do this? I want to avoid this click to interfere with other events, for example, this border is placed in a stackpanel and the stackpanel is being hidden on mouse left button double click.
<Border Grid.Row="2"
x:Name="customPopup"
CornerRadius="10,10,0,0"
Height="25" Margin="0"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Width="Auto"
BorderBrush="DarkBlue"
BorderThickness="1"
Background="AntiqueWhite">
<StackPanel Orientation="Horizontal"
HorizontalAlignment="Center">
<Image Source="/Common.Images;component/Images/Info.png"
Height="20"
Width="20" Stretch="Fill"/>
<TextBlock Margin="5"
VerticalAlignment="Center"
HorizontalAlignment="Left"
Background="Transparent"
FontSize="12">
<Run Text="Click outside to close it"/>
</TextBlock>
</StackPanel>
</Border>
Using MouseDown on the window is probably your best bet to get your desired results. You'll need to do some calculations in order to see if the cursor is outside of the border. Something like:
private void Window_MouseDown(object sender, MouseButtonEventArgs e)
{
// get positions
Point mouseLoc = Mouse.GetPosition(null);
Point borderLoc = customPopup.TranslatePoint(new Point(0,0), null);
// check if the mouse is outside the border
if((mouseLoc.X < borderLoc.x || mouseLoc.X > (borderLoc.X + customPopup.ActualWidth)) && (mouseLoc.Y < borderLoc.Y || mouseLoc.Y > borderloc.Y + customPopup.ActualHeight))
{
// hide the border
}
}
Then to handle the double click, use PreviewMouseDoubleClick. Since Preview events are tunneling rather than bubbling, the double click should get called even if you have a single click event on the same element.
private void Window_PreviewMouseDoubleClick(object sender, MouseButtonEventArgs e)
{
// double click code...
e.Handled = true;
}

Silverlight MouseLeave showing inconistent behaviour

So, my problem is that the MouseLeave event only gets triggered if I move my cursor at a certain speed. Below is a Thumb with a Border. Click the thumb and keep the mouse button down. Move slowly outside the border = no event, Move fast outside the border = event.
<Grid x:Name="LayoutRoot" Background="White">
<Border BorderBrush="Black" BorderThickness="3" Width="200" Height="100"
MouseLeave="Border_MouseLeave">
<Thumb />
</Border>
</Grid>
private void Border_MouseLeave(object sender, MouseEventArgs e)
{
MessageBox.Show("Border_MouseLeave");
}
Is it a bug in silverlight or am I missing something?
Thanx
/Mike
Thanx for the anwers, here's an update:
It seems to have something to do with MouseCapture as Guy suggests. The reason being that I also get the problem using Button or a Rectangle that captures the mouse in code-behind.
If I put a Grid between the Thumb and the Border the problem disappears so I think I will go with that.
I also noticed a related problem as I played around some.
<Grid Width="200" Height="100" Background="Transparent"
MouseLeave="Border_MouseLeave">
<Button />
<Rectangle Width="40" Height="40" Fill="Violet"
HorizontalAlignment="Left" />
</Grid>
If I press the left button and move the cursor to the left over the Rectangle and out the MouseLeave event is not registered.
This is all very strange.

How do I swallow the dropdown behavior inside an Expander.Header?

I would like to prevent an Expander from expanding/collapsing when users click inside the header area. This is basically the same question as Q 1396153, but I'd appreciate a more favorable answer :)
Is there a non-invasive way to do this? I am not sure exactly how to attach behavior to the Expander.Header content to prevent mouseclicks. I'm willing to float in content outside the expander itself via a fixed grid layout, but I'm not keen on the solution. Ideas?
XamlPad sample XAML:
<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:sys="clr-namespace:System;assembly=mscorlib" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" >
<Expander>
<Expander.Header><TextBlock>
When I click this text,
I don't want to trigger expansion/collapse! Only when I click the
expander button do I want to trigger an expand/collapse!
</TextBlock></Expander.Header>
<Grid Background="Red" Height="100" Width="100" >
</Grid>
</Expander>
</Page>
You can stop mouse clicks on the text box from being handled by your application.
XAML:
<Expander>
<Expander.Header>
<TextBlock MouseDown="TextBlock_MouseDown">
When I click this text,
I don't want to trigger expansion/collapse! Only when I click the
expander button do I want to trigger an expand/collapse!
</TextBlock>
</Expander.Header>
<Grid Background="Red" Height="100" Width="100" >
</Grid>
</Expander>
Code behind:
private void TextBlock_MouseDown(object sender, MouseButtonEventArgs e)
{
e.Handled = true;
}
I don't know if this is an abomination, but, I've moved the content out of the Expander.Header and done some Grid/fixed layout/Panel.ZIndex trickery to make it appear that the content is in the Expander.Header...but it's not. This works, but it's horrible.

Changing WPF title bar background color

I have a WPF Windows application. I need to change the background color of the title bar. How can I do that?
In WPF the titlebar is part of the non-client area, which can't be modified through the WPF window class. You need to manipulate the Win32 handles (if I remember correctly).
This article could be helpful for you: Custom Window Chrome
Here's an example on how to achieve this:
<DockPanel HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
LastChildFill="True">
<Grid DockPanel.Dock="Right"
HorizontalAlignment="Right">
<StackPanel Orientation="Horizontal"
HorizontalAlignment="Right"
VerticalAlignment="Center">
<Button x:Name="MinimizeButton"
KeyboardNavigation.IsTabStop="False"
Click="MinimizeWindow"
Style="{StaticResource MinimizeButton}"
Template="{StaticResource MinimizeButtonControlTemplate}" />
<Button x:Name="MaximizeButton"
KeyboardNavigation.IsTabStop="False"
Click="MaximizeClick"
Style="{DynamicResource MaximizeButton}"
Template="{DynamicResource MaximizeButtonControlTemplate}" />
<Button x:Name="CloseButton"
KeyboardNavigation.IsTabStop="False"
Command="{Binding ApplicationCommands.Close}"
Style="{DynamicResource CloseButton}"
Template="{DynamicResource CloseButtonControlTemplate}"/>
</StackPanel>
</Grid>
</DockPanel>
Handle Click Events in the code-behind.
For MouseDown -
App.Current.MainWindow.DragMove();
For Minimize Button -
App.Current.MainWindow.WindowState = WindowState.Minimized;
For DoubleClick and MaximizeClick
if (App.Current.MainWindow.WindowState == WindowState.Maximized)
{
App.Current.MainWindow.WindowState = WindowState.Normal;
}
else if (App.Current.MainWindow.WindowState == WindowState.Normal)
{
App.Current.MainWindow.WindowState = WindowState.Maximized;
}
You can also create a borderless window, and make the borders and title bar yourself
This project was very helpful to me in changing the background color using Window Chrome. If you want to to a ton of other custom things with the title back then maybe a borderless window is the way to go. But for just changing the color this was simple and worked great! https://www.codeproject.com/Articles/5255192/Use-WindowChrome-to-Customize-the-Title-Bar-in-WPF

Resources