WPF Adorner Newbee - wpf

Question

Using VB.Net & WPF
I'm Using Code Available at Overlaying Controls in WPF with Adorners (Converted to VB.Net)
MainWindow.xaml
<Window x:Class="MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid Name="G1">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBlock Text=" This is Parent Control " HorizontalAlignment="Center" VerticalAlignment="Center"/>
<Button Grid.Row="1" Content="Show Child Control " HorizontalAlignment="Center" VerticalAlignment="Center" Click="Button_Click"/>
</Grid>
</Window>
Code Behind
Class MainWindow
Private Sub Button_Click(sender As Object, e As RoutedEventArgs)
Dim U1 As New UserControl1
Using OverlayAdorner(Of UserControl).Overlay(G1, U1)
End Using
End Sub
End Class
UserControl1.xaml
UserControl x:Class="UserControl1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300">
<Grid Background=" #44000000">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid Grid.Row="1" Background="White" HorizontalAlignment="Center" VerticalAlignment="Center">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBlock Text=" This is Child Control " HorizontalAlignment="Center" VerticalAlignment="Center" Margin="5"/>
<TextBox Name="T1" Grid.Row="1" Margin="5"/>
<Button Grid.Row="2" Content="Close Child Control " HorizontalAlignment="Center" VerticalAlignment="Center" Click="Button_Click" Margin="5"/>
</Grid>
</Grid>
</UserControl>
Code Behind
Public Class UserControl1
Private Sub Button_Click(sender As Object, e As RoutedEventArgs)
End Sub
Public Property UserInput As String
Get
Return T1.Text
End Get
Set(value As String)
T1.Text = value
End Set
End Property
End Class
Now when user clicks on button in mainwindow, usercontrol1 should open as adorner and allow user to enter some text in textbox and when user clicks button in usercontrol1 it should close and return text to mainwindow where it would be displayed as message box.
Please Help me to achive the same as i'm newbie in wpf

Answer 1

I attempted to write a pure xaml based solution, you may adjust as per your needs
in this sample there are 2 textboxes 1st is regular while other popups a list when focused and allow you to select an item from it
sample code
<Grid>
<Grid.Resources>
<BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter" />
</Grid.Resources>
<StackPanel HorizontalAlignment="Center"
VerticalAlignment="Center"
MinWidth="200">
<TextBox Text="regular textbox" />
<TextBox Text="{Binding SelectedItem,ElementName=list,TargetNullValue=select an item}">
<TextBox.Triggers>
<EventTrigger RoutedEvent="GotFocus">
<BeginStoryboard>
<Storyboard>
<BooleanAnimationUsingKeyFrames Storyboard.TargetName="button"
Storyboard.TargetProperty="IsChecked">
<DiscreteBooleanKeyFrame Value="true"
KeyTime="0:0:0" />
</BooleanAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</TextBox.Triggers>
</TextBox>
</StackPanel>
<Border Background="#77000000"
Visibility="{Binding IsChecked,ElementName=button,Converter={StaticResource BooleanToVisibilityConverter}}">
<Grid HorizontalAlignment="Center"
VerticalAlignment="Center"
Width="300"
Height="150">
<ListBox x:Name="list">
<sys:String>item 1</sys:String>
<sys:String>item 2</sys:String>
<sys:String>item 3</sys:String>
<sys:String>item 4</sys:String>
<ListBox.Triggers>
<EventTrigger RoutedEvent="MouseLeftButtonUp">
<BeginStoryboard>
<Storyboard>
<BooleanAnimationUsingKeyFrames Storyboard.TargetName="button"
Storyboard.TargetProperty="IsChecked">
<DiscreteBooleanKeyFrame Value="False"
KeyTime="0:0:0" />
</BooleanAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</ListBox.Triggers>
</ListBox>
<ToggleButton IsChecked="False"
x:Name="button"
HorizontalAlignment="Right"
VerticalAlignment="Top"
Content="X"
ToolTip="Close" />
<Grid.Effect>
<DropShadowEffect Opacity=".5" />
</Grid.Effect>
</Grid>
</Border>
</Grid>
content of the grid inside the border is where you'll place your user control
just copy this code to a new project's main window and run it. give it a try and see if this is close to your needs, we can work out to fit it according to your needs.