Develop Reference

Hiding/Showing a UserControl WPF

I am building a WPF MVVM application.
What I have:
I have a ShellWindow which looks like this:
It is composed by 2 rows:
1: the hamburger menu (not important) with Height="*"
2: the console with Height="100"
The console is a UserControl:
<UserControl
//namespaces>
<Grid Name="LoggingGrid" Background="Black">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Margin="{StaticResource SmallLeftMargin}">
<Button
x:Name="CollapseBtn"
Width="25"
Height="25"
Click="CollapseBtn_Click"
Content="▲">
<Button.Template>
<ControlTemplate TargetType="{x:Type Button}">
<Grid>
<Ellipse Fill="White" />
<ContentPresenter
HorizontalAlignment="Center"
VerticalAlignment="Center"
Content="{TemplateBinding Content}" />
</Grid>
</ControlTemplate>
</Button.Template>
</Button>
<StackPanel Margin="5,0,0,0" Orientation="Horizontal">
<Image
Height="25"
Source="/Images/console-icon.png"
Visibility="Visible" />
<Label
Content="Console"
FontSize="16"
Foreground="White" />
</StackPanel>
</TextBlock>
<Border Grid.Row="1">
<ListView
x:Name="LoggingList"
Margin="5"
Background="Black"
BorderThickness="0"
Foreground="White"
ItemsSource="{Binding Logs, UpdateSourceTrigger=PropertyChanged}"
ScrollViewer.HorizontalScrollBarVisibility="Disabled"
ScrollViewer.VerticalScrollBarVisibility="Auto" />
</Border>
</Grid>
</UserControl>
I have omitted the non-important things.
What I want to do:
Whenever the user clicks on the button, the console should collapse and look something like this:
The arrow is also changed.
How can I implement this? What is the best approach using MVVM?
What I have tried:
I have tried using a button click event handler in the code behind - CollapseBtn_Click, just to see what will happen:
private void CollapseBtn_Click(object sender, System.Windows.RoutedEventArgs e)
{
LoggingGrid.Visibility = System.Windows.Visibility.Hidden;
}
Apparently it removes the user control and leaves a white background where it used to be.

Instead of setting the Visibility of the whole LoggingGrid to Hidden, you should set the Visibility of the LoggingList to Collapsed. (For the difference between Hidden and Collapsed, see here: Difference between Visibility.Collapsed and Visibility.Hidden).
Depending on your layout in the ShellWindow you probably have to adjust your row height configuration in the UserControl such that the collapsed LoggingGrid leads to a row with a height of zero.
Regarding MVVM the best approach would be to bind the Button to a bool property ConsoleVisible on your ViewModel such that clicking the button toggles the property between true and false. The styling of the button can be bound to the same property. For the LoggingList Visibility you could use a Binding with a BooleanToVisibilityConverter on the same property.

How to attach OnClick event to a WPF button inside ListBox's <DataTemplate> from codebehind

I need to find a way to attach an event (OnClick) to a button that is a part of a ListBox, inside the ListItem and DataTemplate elements. This is being done from a C# scripting space inside another application which doesn't accept event binding from XAML code but does allow me to do runtime binding. For other controls, which are not inside a data template like the lstSaveSetups ListBox, I use the LogicalTreeHelper, find the element I need and then just bind it. That doesn't work here, and I have also unsuccessfully tried FindName as well as many other approaches.
This is the XAML:
<ListBox Name="lstSavedSetups" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" >
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50" />
<ColumnDefinition Width="50" />
<ColumnDefinition Width="25" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Text="{Binding 1stColumn}" />
<TextBlock Grid.Column="1" Text="{Binding 2ndColumn}" />
<Button Grid.Column="2" Name="btnDelete" />
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
The simplilfied c# code is:
System.IO.FileStream fs = new System.IO.FileStream(System.IO.Path.Combine(myBaseDir, #"listBox.xaml"), System.IO.FileMode.Open);
System.Windows.Controls.Page page = (System.Windows.Controls.Page)System.Windows.Markup.XamlReader.Load(fs);
lstSavedSetups = LogicalTreeHelper.FindLogicalNode(page, "lstSavedSetups") as System.Windows.Controls.ListBox;
System.Windows.Controls.Grid.SetRow(lstSavedSetups, 16);
System.Windows.Controls.Grid.SetColumn(lstSavedSetups, 1);
myGrid.Children.Add(lstSavedSetups);
//the following works
lstSavedSetups.SelectionChanged += lstSavedSetups_SelectionChanged;
//one of many examples of what does not work:
System.Windows.Controls.Button btnDelete = lstSavedSetups.ItemTemplate.FindName("btnDelete", lstSavedSetups) as System.Windows.Controls.Button;
btnDelete.Click += btnDelete_OnClick;
I didn't include all that I tried, but I am starting to think I tried every single solution I could find but didn't manage to get this to work.
What am I doing wrong? Any help will be really appreciated! Thank you!
Libor

How do you overlay a control over a grid that it is not in (xaml/wpf)

I have a grid that serves as a drag/drop area between textboxes, however, placing it between them causes the textboxes to be displaced. How can I get it so that the drag/drop grid is behind the text boxes, instead of in between them?
The first grid is the drag/drop area and below is the code for the textboxes:
<Grid Grid.Column="0" Height="Auto" Width="20" AllowDrop="True" Background="White"
DragEnter="Grid_DragEnter" DragLeave="Grid_DragLeave" Drop="Grid_Drop" Tag="{Binding}"/>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<TextBlock HorizontalAlignment="Left" Margin="5,2"
Text="some text"
VerticalAlignment="Center" FontSize="5" />
</Grid>
A picture of what I mean, where the black boxes are the textboxes, and everything enclosed in the red is the grid area where things can be dragged and dropped.

This works for me. Code behind is a mild bummer, especially referencing the droptarget by name. It would be easy to turn that into an attached property that you bind to the droptarget element, which would be convenient for use in templates etc. Anyhow you can't do drag/drop without codebehind, so there you are. Sometimes life gives you codebehind. Use it to, uh, make, um, lemons.
A lot of this XAML is just fussing around to make the elements overlap each other the way yours do. The Grid.Column/Grid.ColumnSpan stuff is important for the overlapping layout you have in mind.
Note that the TextBoxes use the PreviewDragOver event, not DragOver. DragOver wasn't being raised. Not sure if that's a bug or my faulty understanding, but a lot of people seem to have run into trouble getting DragOver to work with WPF TextBox.
XAML:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
</Grid.ColumnDefinitions>
<Grid
Grid.Column="0"
Grid.ColumnSpan="2"
Margin="80,0,80,0"
Height="80"
VerticalAlignment="Center"
HorizontalAlignment="Stretch"
Drop="TextBox_Drop"
DragOver="TextBox_DragOver"
Background="DeepSkyBlue"
x:Name="DropTargetGrid"
AllowDrop="True"
></Grid>
<TextBox
Grid.Column="0"
Margin="40,40,10,40"
Drop="TextBox_Drop"
PreviewDragOver="TextBox_DragOver"
AllowDrop="True"
VerticalAlignment="Center"
/>
<TextBox
Grid.Column="1"
Margin="10,40,40,40"
Drop="TextBox_Drop"
PreviewDragOver="TextBox_DragOver"
AllowDrop="True"
VerticalAlignment="Center"
/>
</Grid>
Code behind:
private void TextBox_Drop(object sender, DragEventArgs e)
{
// Do whatever
}
private void TextBox_DragOver(object sender, DragEventArgs e)
{
var ptTargetClient = e.GetPosition(DropTargetGrid);
if (ptTargetClient.X >= 0 && ptTargetClient.X <= DropTargetGrid.ActualWidth
&& ptTargetClient.Y >= 0 && ptTargetClient.Y <= DropTargetGrid.ActualHeight)
{
e.Handled = true;
e.Effects = DragDropEffects.Move;
}
}

Binding Button to its handler by convention doesn't work

I have a WPF application with caliburn.micro. There is a user control MyView in a tab item of a tab control. Within that user control, there is another tab control. In one of its tabs, I added a button, and a corresponding method with the same name in the MyViewModel. But this method is not called when I click the button. Could you please tell what might cause it?
Thanks.
In the View:
<TabControl SelectedIndex="{Binding SelectedTabIndex}">
...
<TabItem x:Name="TextTab" Header="Text">
<Grid Grid.Row="1">
<Grid.RowDefinitions>
<RowDefinition Height="10*"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<ScrollViewer Grid.Row="0" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
...
</ScrollViewer>
<Button Grid.Row="1" x:Name="SaveText" Content="Save" Width="50" Height="25" />
</Grid>
</TabItem>
In the ViewModel:
public void SaveText()
{
...
}

I found a solution:
<Button Grid.Row="1" x:Name="SaveText" cal:Message.Attach="SaveText" Content="Save" Width="50" Height="25" />
Still don't know why the convention didn't work without "Attach".

Silverlight, itemcontrol LostFocus and GetFocus not firing

Okay, so the situation as like this:
I've got an ItemsControl, which contains several children.
the children are actually a UserControl, this is it's Xaml:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<!--DAY HEADER-->
<Border x:Name="dayHeader" Height="20" BorderBrush="#B0B6BE" BorderThickness="1" Grid.Row="0" Background="{StaticResource WeekHeader}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" HorizontalAlignment="Left" VerticalAlignment="Center" TextAlignment="Center"
TextWrapping="NoWrap" Margin="1.5,0,0,0" Text="18"/>
<TextBlock Grid.Column="1" HorizontalAlignment="Center" VerticalAlignment="Center" TextAlignment="Center"
TextWrapping="NoWrap" Margin="2,0,0,0" Text="Thuesday" />
</Grid>
</Border>
<!--DAY HOURS-->
<ItemsControl x:Name="dayHours" Grid.Row="1">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Border Name="dayHourBorder" Height="30" BorderBrush="#B0B6BE" Width="193" Tag="{Binding Index}" BorderThickness="1,0,1,1" Background="AliceBlue"
MouseLeftButtonDown="dayHourBorder_MouseLeftButtonDown" MouseLeftButtonUp="dayHourBorder_MouseLeftButtonUp"
MouseMove="dayHourBorder_MouseMove" />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>
IN SHORT
it's a grid that in the first row has a border
and in the second row has an ItemsControl.
Alright now... what i wanna do is, whenever i click between the child ItemControls (day hours) i want them to execute some function on the LostFocus() event and on GotFocus() event.
problem is... they don't fire! and it tried registering to them from every possible angle!
HALP.
UPDATE
I tried executing Focus() on MouseLeftButtonDown, but what happened is, it went straight to OnLostFocus, which is not what i want...
i don't understand it

Here is an overview on focus in Silverlight. The article mentions four conditions that need to be satisfied in order for the control to get focus. You should check those four conditions for your control and it should be fine I suppose.
You should also consider on which element you'd like to receive those events as GotFocus and LostFocus are bubbling events.

I've managed to fix this issue by doing this:
doing: this.Focus();
and then: e.Handled = true;
the problem was that the ItemControl usually can't hold focus, and so the click event bubbles up.
but when i tell him it's Handled, it stops it's bubbling and won't lose the focus.