I have created a search User controller , and I wont to make textChanged event available when um using the User Controller
<UserControl x:Class="VSOft.WpfControls.VSeachTextBox.VSearchTextBox"
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"
xmlns:local="clr-namespace:VSOft.WpfControls.VSeachTextBox"
xmlns:resx="clr-namespace:VSOft.WpfControls.Properties"
xmlns:VFontAwsome="clr-namespace:VSOft.WpfControls.VFontAwsome"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300" Height="25" MouseLeftButtonDown="UserControl_MouseLeftButtonDown">
<Viewbox>
<Grid>
<TextBox
x:Name="SearchText"
Margin="0"
TextWrapping="Wrap"
Text="" Height="25"
GotFocus="SearchText_GotFocus"
TextInput="SearchText_TextInput"
TextChanged="SearchText_TextChanged" />
<Label x:Name="SearchHelperLabel" Content="Search" Height="25" Foreground="#FF9E9292" GotFocus="SearchHelperLabel_GotFocus" />
<TextBlock x:Name="SearchTextIcon" TextWrapping="Wrap" Margin="275,0,0,0" Height="25" Foreground="{x:Null}" GotFocus="SearchTextIcon_GotFocus" HorizontalAlignment="Right">
<VFontAwsome:VFontAwsome VForeground="{DynamicResource SideBar.Icon.Normal}" VFontSize="20" VFontsType="search" Height="25" Width="25" HorizontalAlignment="Right" />
</TextBlock>
</Grid>
</Viewbox>
This is my implementation . How to make Textchanged Event available when using the User Control ?
one way to do this is by using RoutedEvent Handler delegate where you place a delegate in your usercontrol and then access it in the MainWindow
In your UserControl.xaml.cs
public event RoutedEventHandler TestClick;
void onSearchFocus(object sender, RoutedEventArgs e)
{
if (this.TestClick != null)
{
this.TestClick(this, e);
}
}
and in xaml
<Grid>
<TextBox
x:Name="SearchText"
Margin="0"
TextWrapping="Wrap"
Text="" Height="25"
GotFocus="onSearchFocus"
You can access this TestClick delegate in your mainwindow just like any other command and create it's navigation handler.
<Grid>
<my:UserControl x:Name="testcontrol" TestClick="mycommand_click" />
</Grid>
Related
So I created a custom Pop Up dialogue box in UWP, to make it reusable, i made use it of a User Control
<UserControl
x:Class="ContentDialogueBox.PopUpCustomDialogueUserControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:ContentDialogueBox"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="300"
d:DesignWidth="400">
<ContentDialog x:Name="MyContentDialogCustom"
VerticalAlignment="Stretch"
HorizontalAlignment="Stretch"
Title="Lorem Ipsum"
PrimaryButtonText="OKxxx"
SecondaryButtonText="Canc"
Margin="0,0,-98,0" Width="1000" >
<Grid Background="Wheat">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<TextBlock Text="Name" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<TextBox PlaceholderText="First Name" Grid.Row="0" Grid.Column="1" HorizontalAlignment="Stretch" VerticalAlignment="Center" Margin="10"/>
<TextBlock Text="Middle Name" HorizontalAlignment="Center" VerticalAlignment="Center" Grid.Row="1"/>
<TextBox PlaceholderText="Middle Name" Grid.Row="1" Grid.Column="1" HorizontalAlignment="Stretch" VerticalAlignment="Center" Margin="10"/>
<TextBlock Grid.Row="2" Text="Name" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<TextBox PlaceholderText="First Name" Grid.Row="2" Grid.Column="1" HorizontalAlignment="Stretch" VerticalAlignment="Center" Margin="10"/>
</Grid>
</ContentDialog>
</UserControl>
I was able to reference the user control in another page that contains the button named ButtonShowContentDialog4, what i want to achieve is display the PopUp Dialogue box, when i click the button in the page. Please how do i achieve this.
private void ButtonShowContentDialog4_Click(object sender, RoutedEventArgs e)
{
//show the PopUp here when this button is clicked
}
There are couple of ways to achieve that. Apart from the thing that you could have made a custom ContentDialog instead of putting it inside the user control, you can probably achieve your goal like this:
In your PopUpCustomDialogueUserControl class define a method that would show your popup:
public async Task ShowMyDialog() => await MyContentDialogCustom.ShowAsync();
Once you have it, add your PopUpCustomDialogueUserControl somwhere in your Page in xaml (remember to have a suitable namespace added (ContentDialogueBox) defined below as local) and add it a Name:
<local:PopUpCustomDialogueUserControl x:Name="MyCustomDialog"/>
Then you can call its method in code:
private async void ButtonShowContentDialog4_Click(object sender, RoutedEventArgs e)
{
await MyCustomDialog.ShowMyDialog();
}
I want to make change main panel content when I choice action in menu button.
Like main content page, setting page, content page on Main panel (in code used grid x:Name="main_~~~)
It for use just can make 3 and control visibility??
or Can use include like xml at Android and change include target??
( ex > includelayout="#layout/app_bar_main")
Mainwindow.xaml
<Window x:Class="M_C.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-
compatibility/2006"
xmlns:local="clr-namespace:M_C"
mc:Ignorable="d"
Title="MainWindow"
Width="1024" Height="768"
WindowStyle="None"
WindowState="Maximized"
WindowStartupLocation="CenterScreen">
<Grid x:Name="wide_Out" Background="#000000">
<Viewbox Stretch="Uniform">
<Grid Width="1024" Height="768" VerticalAlignment="Top">
<DockPanel x:Name="L_black" HorizontalAlignment="Left"
Height="768" LastChildFill="False" VerticalAlignment="Top" Width="62"
Background="#FF242424">
<Button Margin="15,8,0,0" Height="40"
VerticalAlignment="Top" Width="30"/>
</DockPanel>
<DockPanel x:Name="T_blue" HorizontalAlignment="Left"
Height="84" LastChildFill="False" Margin="62,0,0,0" VerticalAlignment="Top"
Width="968" Background="#FF248BC7">
<TextBlock Margin="200,5,200,0" Height="70"
TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Top" Width="554"/>
</DockPanel>
<DockPanel x:Name="L_blue" HorizontalAlignment="Left"
Height="685" LastChildFill="False" Margin="62,83,0,0"
VerticalAlignment="Top" Width="82" Background="#FF248BC7"/>
<DockPanel x:Name="R_blue" HorizontalAlignment="Left"
Height="685" LastChildFill="False" Margin="940,83,0,0"
Background="#FF248BC7" Width="84"/>
<DockPanel x:Name="B_blue" HorizontalAlignment="Left"
Height="90" LastChildFill="False" Margin="143,678,0,0"
VerticalAlignment="Top" Width="799" Background="#FF248BC7">
<Image Margin="250,15,250,15" Height="70"
VerticalAlignment="Top" Width="290" />
</DockPanel>
<!--<DockPanel x:Name="main_content_panel"
HorizontalAlignment="Left" Height="594" LastChildFill="False"
Margin="144,84,0,0" VerticalAlignment="Top" Width="790">-->
<Grid x:Name="main_con_body" Margin="143,82,84,88"
Width="798" Height="594" Background="#ffffff">
</Grid>
<!--</DockPanel>-->
</Grid>
</Viewbox>
</Grid>
</Window>
You can Define Frame inside Your Window and navigate between as many page you want:
<Frame Name="FrameWithinGrid" >
</Frame>
and on button Click you can simply navigate:
private void button1_Click(object sender, RoutedEventArgs e)
{
FrameWithinGrid.Navigate(new System.Uri("Page1.xaml",
UriKind.RelativeOrAbsolute));
}
to know more See here
MVVM Approach
Make main_con_body be a ContentControl
Make Window's DataContext a viewmodel
Bind main_con_body's Content property to a viewmodel property of the data context
Define different DataTemplates for the various types of viewmodels that might be present
There is a button in the following xaml code:
<Button Grid.Row="1" x:Name="First" Content="First" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="40,91,0,67" />
In the constructor of the window I have assigned ApplicationCommands.Copy to the button.
public MainWindow()
{
InitializeComponent();
this.doc.Unit = DevExpress.Office.DocumentUnit.Point;
this.First.Command = ApplicationCommands.Copy;
First.CommandTarget = this.doc;
}
this.doc in the above code is a typical richTextBox.
The problem is that the button is always disabled. Why?
The entire xaml code is as follows:
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:WpfApplication1"
xmlns:system="clr-namespace:System;assembly=mscorlib"
xmlns:com="clr-namespace:DevExpress.XtraRichEdit.Commands;assembly=DevExpress.RichEdit.v16.1.Core"
xmlns:dxre="http://schemas.devexpress.com/winfx/2008/xaml/richedit" xmlns:dxe="http://schemas.devexpress.com/winfx/2008/xaml/editors" xmlns:ig="http://schemas.infragistics.com/xaml" xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation" xmlns:dx="http://schemas.devexpress.com/winfx/2008/xaml/core" x:Class="WpfApplication1.MainWindow"
Title="MainWindow" Height="700" Width="1000" x:Name="wnd">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="163*" />
<RowDefinition Height="60*" />
</Grid.RowDefinitions>
<dxre:RichEditControl x:Name="doc" Grid.Row="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="0,0,0,23" Unit="Point" ActiveViewType="PrintLayout"/>
<!--<telerik:RadToggleButton
Content="B" HorizontalAlignment="Left" Height="Auto" IsThreeState="False" IsChecked="False" Margin="10,32,0,0" Grid.Row="1" VerticalAlignment="Top" Width="26"/>-->
<Button Grid.Row="1" x:Name="First" Content="First" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="40,91,0,67" />
</Grid></Window>
The Button.Command property is a type if ICommand, which includes a CanExecute method. When this method returns false the Button will be disabled.
I believe that's what's happening here, the ApplicationCommands.Copy command is returning false for CanExecute. Perhaps someone else can offer an explanation as to why this is in this case?
Are you able to use a CommandBinding as described here to implement your own CanExecute event handler?
<Window x:Class="WCSamples.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="CloseCommand"
Name="RootWindow"
>
<Window.CommandBindings>
<CommandBinding Command="ApplicationCommands.Copy"
CanExecute="CanExecuteHandler"
/>
</Window.CommandBindings>
<StackPanel Name="MainStackPanel">
<Button Command="ApplicationCommands.Copy"
Content="Copy" />
</StackPanel>
</Window>
private void CanExecuteHandler(object sender, CanExecuteRoutedEventArgs e)
{
// CanExecute logic in here.
e.CanExecute = true;
}
Hi i have a wpf user control and wpf textbox control in a page, when i pressed on Tab in keyboard it's not going to next control which is a normal textbox. i had set the property Tabstop to true but nothing worked...
I have not created any special property for tab index in user control.
<StackPanel Orientation="Vertical">
//(User Control)
<controls:UserControl x:Name="txt_Name" Header="Name"/>
(Normal TextBox Control)
<StackPanel Orientation="Vertical" Margin="10">
<Label Content="Size" VerticalAlignment="Top" />
//(Normal TextBox Control)
<TextBox Name="txt_sizeofFacility"/>
</StackPanel>
<StackPanel Orientation="Vertical" Margin="10">
<Label Content="Age" VerticalAlignment="Top" />
//(Normal TextBox Control)
<TextBox Name="txt_ageofFacility"/>
</StackPanel>
//(User Control)
<controls:UserControl x:Name="txt_primaryActivity" Header="Primary Activity"/>
</StackPanel>
This is my code:
<StackPanel Orientation="Vertical">
<!--//(User Control)-->
<controls:UserControl1 x:Name="txt_Name" />
<!--(Normal TextBox Control)-->
<StackPanel Orientation="Vertical" Margin="10">
<Label Content="Size" VerticalAlignment="Top" />
<!--//(Normal TextBox Control)-->
<TextBox Name="txt_sizeofFacility"/>
</StackPanel>
<StackPanel Orientation="Vertical" Margin="10">
<Label Content="Age" VerticalAlignment="Top" />
<!--//(Normal TextBox Control)-->
<TextBox Name="txt_ageofFacility"/>
</StackPanel>
<!--//(User Control)-->
<controls:UserControl1 x:Name="txt_primaryActivity" />
</StackPanel>
And this is the UserControl:
<UserControl x:Class="TabIndex.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>
<TextBox x:Name="test"></TextBox>
</Grid>
I can reproduce. Tab works even after setting focuse manually in each textbox
I had the same problem and found out that you can set the property below on the user control and that worked for me.
KeyboardNavigation.TabNavigation="Local"
I have the following main.xaml and usercontrol.
I need to place several times the user control on the 2nd row, 2nd column of the grid, By using visual studio it wont allow to drag and drop the user control, so I suppose I have to do it by code, I just dont know how
MainPage.xaml
<Grid HorizontalAlignment="Left" Height="768" VerticalAlignment="Top" Width="1366" x:Name="grid" Background="Black">
<Grid.RowDefinitions>
<RowDefinition Height="150"/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="250"/>
</Grid.ColumnDefinitions>
<Border BorderBrush="White" BorderThickness="3" Grid.Column="1" Background="Red" CornerRadius="30"/>
<TextBlock x:Name="txtCountry" Grid.Column="1" TextWrapping="Wrap" FontSize="36" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<TextBlock x:Name="txtTime" Grid.Row="1" TextWrapping="Wrap" FontSize="180" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
Usercontrol
<UserControl
x:Class="AlarmPro.TimeOnCity"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:AlarmPro"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="150"
d:DesignWidth="250">
<Grid Background="Black">
<Grid.RowDefinitions>
<RowDefinition Height="30"/>
<RowDefinition/>
</Grid.RowDefinitions>
<Border BorderBrush="#FFDE6A6A" BorderThickness="1" Grid.Row="0" Grid.Column="0" Background="#FFDC4646">
<TextBlock TextWrapping="Wrap" Text="TextBlock" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="16"/>
</Border>
<Border BorderBrush="Black" BorderThickness="1" Grid.Row="1" Background="#FFAE4F00">
<TextBlock TextWrapping="Wrap" Text="TextBlock" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="36"/>
</Border>
</Grid>
</UserControl>
Do you mean like this?
<my:UserControlName Grid.Column="2" Grid.Row="2" ... />
<my: in this case is the alias for the CLR namespace the UserControl resides in. It is defined at the top of your XAML, inside the <Window> or <UserControl> tag depending on context.
For example,
<Window ...
xmlns:my="clr-namespace:AssemblyName"
...
/>
MainPage.Xaml
<Page
x:Class="UserControlExample.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:UserControlExample"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid x:Name="MainContent" Background="Azure" >
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<ScrollViewer Grid.Row="1" HorizontalScrollBarVisibility="Hidden"
VerticalScrollBarVisibility="Hidden">
<local:UserControl1 x:Name="MyHelloWorldUserControl" Grid.Row="1" />
</ScrollViewer>
</Grid>
</Page>
UserControl1.xaml
<UserControl
x:Class="UserControlExample.UserControl1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:UserControlExample"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="300"
d:DesignWidth="400">
<Grid Background="Bisque">
<StackPanel>
<StackPanel Orientation="Horizontal" Height="81">
<TextBlock Text="Your Name is" Foreground="Blue" FontSize="30" Margin="0,0,0,10"/>
<TextBox x:Name="Input" Background="White" Width="225" />
</StackPanel>
<Button Content="Click Me" Foreground="Brown" FontSize="30" Click="Button_Click"/>
<TextBlock x:Name="Output" FontSize="100"/>
</StackPanel>
</Grid>
</UserControl>
MainPage.xaml, I am binding a login UserControl
by using the namespace : xmlns:UC="clr-namespace:Test.Views" , since I have my usercontrol in Folder named "Views".
<ScrollViewer>
<UC:Login BtnLoginClick="Login_BtnLoginClick"/>
</ScrollViewer>
Login.cs
public partial class Login : UserControl {
public event EventHandler BtnLoginClick;
public Login()
{
InitializeComponent();
}
private void btnLogin_Click(object sender, RoutedEventArgs e)
{
string userName = txtUserName.Text;
string userPassword = txtUserPassword.Password.Trim();
if (userName != null && userName != string.Empty && userPassword != null && userPassword != string.Empty)
{
if (this.BtnLoginClick != null)
{
this.BtnLoginClick(this, e);
}
}
else
{
MessageBox.Show("Invalid username or password");
}
}
}
Finally, dont forgot to use the event handler in MainPage.xaml to capture the button clicked event from Login Usercontrol to do other actions.
MainPage.xaml
<UC:Login BtnLoginClick="Login_BtnLoginClick"/>
Here "BtnLoginClick" its an event Handler defined in the Login.xaml[User Control].
Create new event for this "BtnLoginClick" event as i created "Login_BtnLoginClick".
MainPage.cs
private void Login_BtnLoginClick(object sender, EventArgs e)
{
Messagebox.Show("Event captured successfully");
////Here you can add your stuffs...
}
For UWP, in UserControl.xaml, find the local namespace xmlns:local notation: xmlns:local="using:ProjectName.Folder" at the top (by convention, C# namespaces are named the same way as the folder that contains them, so folder also means namespace).
In MainPage.xaml, add a reference to this namespace. The reference prefix can be any name desired: for example, CustomPrefix, as in xmlns:CustomPrefix="using:ProjectName.Folder". Then, anywhere in MainPage.xaml, display the control by prefixing its name with <CustomPrefix:...>.
UserControl.xaml
<UserControl
xmlns:local="using:ProjectName.Folder">
MainPage.xaml
<Page
xmlns:CustomPrefix="using:ProjectName.Folder">
<CustomPrefix:UserControl />
</Page>
The project needs to be built to discard XAML errors in Visual Studio, otherwise the design view remains blank and the XAML has green squiggles.