Problem
I needed to make controls that used images as backgrounds that could be any width without distorting the images. For example if I used a single image and stretched it the rounded corners of the image would become distorted.
Solution
The solution, given by Noxivs, was to use a custom UserControl with three images, two sides and a middle that is stretched.
It is important to add SnapsToDevicePixels="True" to the UserControl Grid as without that a single pixel gap appeared between the images.
MainWindow.xaml
<Window x:Class="Testing.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:ns="clr-namespace:Testing"
Title="MainWindow" Height="350" Width="525">
<Grid Name="MainGrid">
<ns:ScalableTextBox TextBoxText="Added in XAML" Width="120" Margin="0,0,0,100">
</ns:ScalableTextBox>
</Grid>
</Window>
MainWindow.xaml.cs
ScalableTextBox scalableTextBox = new ScalableTextBox();
scalableTextBox.TextBoxText = "Added in C#";
scalableTextBox.Width = 100;
MainGrid.Children.Add(scalableTextBox);
ScalableTextBox.xaml.cs
public partial class ScalableTextBox : UserControl
{
public ScalableTextBox()
{
InitializeComponent();
}
public string TextBoxText
{
get { return this.TextBoxName.Text; }
set { this.TextBoxName.Text = value; }
}
}
ScalableTextBox.xaml
<UserControl x:Class="Testing.ScalableTextBox"
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="36" d:DesignWidth="50" Height="36" MinWidth="29">
<Grid>
<Grid SnapsToDevicePixels="True">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="14" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="14" />
</Grid.ColumnDefinitions>
<Image Grid.Column="0" Source="pack://siteoforigin:,,,/Images/left.png" />
<Image Grid.Column="1" Stretch="Fill" Source="pack://siteoforigin:,,,/Images/center.png"/>
<Image Grid.Column="2" Source="pack://siteoforigin:,,,/Images/right.png" />
</Grid>
<TextBox Name="TextBoxName" VerticalAlignment="Center"
HorizontalAlignment="Center" Background="{x:Null}"
BorderBrush="{x:Null}" FontSize="12"/>
</Grid>
</UserControl>
Thanks again to Noxivs!
I'm not sure to understand what you want but :
I think you can create exactly the same design of your images in XAML
(vectorial keeps your style no matter the size).
What about the creation of your own control user with your textbox (0
opacity) and as many images as you want in the background ? (not really nice)
These are only suggestions.
EDIT :
And here is your scalable textbox :
I had to split your first image.
http://i.stack.imgur.com/cGJ8u.png
http://i.stack.imgur.com/Fo4Oo.png
<UserControl x:Class="YourNamespace.ScalableTextBox"
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" Height="36" MinWidth="29">
<Grid>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="14" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="14" />
</Grid.ColumnDefinitions>
<Image Grid.Column="0" Source="left.png" />
<Image Grid.Column="1" Source="center.png" Stretch="Fill"/>
<Image Grid.Column="2" Source="right.png" />
</Grid>
<TextBox VerticalAlignment="Center" Background="{x:Null}" BorderBrush="{x:Null}" FontSize="14" FontFamily="Comic Sans MS" Margin="8,0"/>
</Grid>
<Window x:Class="YourNamespace.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:ns="clr-namespace:_28400241"
Title="MainWindow" Height="350" Width="525">
<Grid>
<ns:ScalableTextBox></ns:ScalableTextBox>
</Grid>
</Window>
I still think it is better to create the controls in XAML.
Regards.
EDIT 2 :
With a dynamic loading of images (myGrid is the main grid of the window, and i named the 3 images control in the ScalableTextBox object) :
public MainWindow()
{
InitializeComponent();
ScalableTextBox tb = new ScalableTextBox();
tb.Width = 140;
BitmapImage src = new BitmapImage();
src.BeginInit();
src.UriSource = new Uri("./left.png", UriKind.Relative);
src.EndInit();
tb.LeftImage.Source = src;
src = new BitmapImage();
src.BeginInit();
src.UriSource = new Uri("./center.png", UriKind.Relative);
src.EndInit();
tb.CenterImage.Source = src;
src = new BitmapImage();
src.BeginInit();
src.UriSource = new Uri("./right.png", UriKind.Relative);
src.EndInit();
tb.RightImage.Source = src;
Grid.SetRow(tb, 0);
Grid.SetColumn(tb, 0);
myGrid.Children.Add(tb);
}
I'm not sure to understand what you want but if you just want the image to appear as a background for the textbox, you could create a style for the textbox, modify the ControlTemplate and place a grid within it, containing the images.
For example (this is just to give you an idea of what I am trying to explain, not the exact code to implement):
<Style TargetType="{x:Type TextBox}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TextBox">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="14" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="14" />
</Grid.ColumnDefinitions>
<Image Grid.Column="0" Source="left.png" />
<Image Grid.Column="1" Source="center.png" Stretch="Fill"/>
<Image Grid.Column="2" Source="right.png" />
<ScrollViewer x:Name="ContentElement" Grid.Column="1"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
Related
I have a UWP application:
My app command bar (XAML 2) manages TabView content (XAML 1). I need different command bars for different tab types. Now I using several frames in second XAML, and I can't change it from XAML 1.
How I can change XAML 2 UI from XAML 1 .cs file?
Thanks for any help.
UPD:
I have main XAML:
<Page
x:Class="Test.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:NetChrom"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid x:Name="BaseGrid">
<Grid.RowDefinitions>
<!-- titlebar -->
<RowDefinition x:Name="Titlebar" Height="30">
</RowDefinition>
<!-- toolbar -->
<RowDefinition x:Name="Toolbar" Height="110">
</RowDefinition>
<!-- main window -->
<RowDefinition>
</RowDefinition>
</Grid.RowDefinitions>
<Grid x:Name="TitlebarGrid" Grid.Row="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5*">
</ColumnDefinition>
</Grid.ColumnDefinitions>
<local:TitleBar/>
</Grid>
<Grid x:Name="ToolbarGrid" Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="37*">
</ColumnDefinition>
<ColumnDefinition Width="27*"/>
</Grid.ColumnDefinitions>
<!-- toolbar -->
<local:Toolbar Grid.ColumnSpan="2"/>
</Grid>
<!-- content-->
<Grid x:Name="MainContent" Grid.Row="2" Background="AliceBlue">
<Grid.ColumnDefinitions>
<ColumnDefinition MaxWidth="325" MinWidth="120">
</ColumnDefinition>
<ColumnDefinition>
</ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid Grid.Column="1" Background="#F3F3F3">
<local:MainTabbar/>
</Grid>
<Grid Grid.Column="0" Background="LightBlue">
<local:FileManager/>
</Grid>
<controls:GridSplitter
Margin="0,10,10,0"
Opacity="0"
Background="Transparent"
GripperCursor="Default"
HorizontalAlignment="Left"
Grid.Column="1"
ResizeDirection="Auto"
ResizeBehavior="BasedOnAlignment"
CursorBehavior="ChangeOnSplitterHover"
Width="0">
<controls:GridSplitter.RenderTransform>
<TranslateTransform X="-8" />
</controls:GridSplitter.RenderTransform>
</controls:GridSplitter>
</Grid>
</Grid>
</Page>
and in this XAML there are two another XAML: MainTabbar (XAML 1) and Toolbar (XAML 2) from scheme.
This is Toolbar.xaml:
<UserControl
x:Class="Test.Toolbar"
x:Name="toolbarControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
xmlns:local="using:Test"
xmlns:met="using:Test.Method"
xmlns:chr="using:Test.ChrOptions"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
d:DesignHeight="110"
d:DesignWidth="1920">
<Border CornerRadius="0,0,10,10" BorderBrush="#D4D4D4" BorderThickness="1,0,1,1" Background="#F3F3F3">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="110">
</RowDefinition>
</Grid.RowDefinitions>
<Grid x:Name="MainGrid">
<Grid.ColumnDefinitions>
<ColumnDefinition>
</ColumnDefinition>
<ColumnDefinition Width="320"/>
</Grid.ColumnDefinitions>
<Grid Grid.Column="1" HorizontalAlignment="Right">
<StackPanel Orientation="Horizontal" Margin="0,0,0,0">
</StackPanel>
</Grid>
<Grid Grid.Column="0">
<Frame x:Name="toolbarFrame"/> <!-- cmdbar frame>
</Grid>
</Grid>
</Grid>
</Border>
</UserControl>
This is MainTabbar:
<Page
x:Class="Test.MainTabbar"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Test"
xmlns:met="using:Test.Method"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
d:DesignWidth="1595">
<Grid Margin="10,0,0,0">
<muxc:TabView x:Name="Tabs"
IsAddTabButtonVisible="False"
VerticalAlignment="Stretch"
TabCloseRequested="Tabs_TabCloseRequested"
AllowDropTabs="True"
CanDragTabs="False"
CanReorderTabs="True"
TabDroppedOutside="Tabs_TabDroppedOutside"
TabStripDragOver="Tabs_TabStripDragOver"
TabStripDrop="Tabs_TabStripDrop"
TabDragStarting="Tabs_TabDragStarting" >
<muxc:TabView.TabItems>
<muxc:TabViewItem Header="SampleMethod.met" IsClosable="False">
<muxc:TabViewItem.IconSource>
<muxc:SymbolIconSource Symbol="Placeholder" />
</muxc:TabViewItem.IconSource>
<!-- <Frame x:Name="MethodFrame"/> -->
<met:MethodTabView/>
</muxc:TabViewItem>
<muxc:TabViewItem Header="SampleChrome.chr" IsClosable="False">
<muxc:TabViewItem.IconSource>
<muxc:SymbolIconSource Symbol="Placeholder" />
</muxc:TabViewItem.IconSource>
<local:ChrView/>
</muxc:TabViewItem>
</muxc:TabView.TabItems>
<muxc:TabView.TabStripHeader>
<Grid x:Name="ShellTitlebarInset" Background="#F3F3F3" />
</muxc:TabView.TabStripHeader>
<muxc:TabView.TabStripFooter>
<Grid x:Name="CustomDragRegion" Background="#F3F3F3" />
</muxc:TabView.TabStripFooter>
</muxc:TabView>
</Grid>
</Page>
I need to get current tab type in MainTabbar.xaml.cs (it's ok). And then change Command Bar in Toolbar.xaml frame.
I wrote this procedure for change frame in Toolbar.xaml.cs:
public void setMetCmdbarMode()
{
toolbarFrame.Navigate(typeof(MethodToolbar), null);
}
But I don't know how I can call this function from MainTabbar class, or how I can translate tab type to Toolbar class.
After checking your code, you could try to create a custom event in the MainTabbar, and handle it in the MainPage. This event is triggered when the selected item of the TabView is changed. Then you could get notified in the MainPage and call method to change the Toolbar.
Here are the detailed steps:
Create a custom Event named TabItemChanged on the MainTabbar page and call it in the TabView_SelectionChanged event.
Handle the TabItemChanged in the MainPage
Change the content of the Toolbar as you want in the EventHandler based on the TabViewItem.
Code in MainTabbar:
public sealed partial class MainTabbar : Page
{
public event EventHandler TabItemChanged;
public MainTabbar()
{
this.InitializeComponent();
}
private void Tabs_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
if (this.TabItemChanged != null)
this.TabItemChanged(Tabs.SelectedItem, new EventArgs());
}
}
In the MainPage.Xaml
<local:MainTabbar TabItemChanged="MainTabbar_TabItemChanged"/>
In the MainPage.Xaml.cs
private void MainTabbar_TabItemChanged(object sender, EventArgs e)
{
MUXC.TabViewItem tabitem = sender as MUXC.TabViewItem;
switch (tabitem.Tag)
{
case "123":
Debug.WriteLine("FirstItemSelectecd");
//call method for toobar to change content
//like setMetCmdbarMode()
break;
case "234":
Debug.WriteLine("SecondItemSelectecd");
//call method for toobar to change content
//like setMetCmdbarMode()
break;
}
}
Update:
Give the toolbar a name in MainPage.Xaml
<local:Toolbar x:Name="myToolbar" Grid.ColumnSpan="2"/>
Then call it in the MainPage.Xam.cs:
switch (tabitem.Tag)
{
case "123":
Debug.WriteLine("FirstItemSelectecd");
myToolbar.setMetCmdbarMode();
break;
case "234":
Debug.WriteLine("SecondItemSelectecd");
break;
}
Here I have my custom control:
xaml:
<UserControl x:Class="Tasks.Assets.Objects.Card"
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:Tasks.Assets.Objects"
mc:Ignorable="d"
d:DesignHeight="200" d:DesignWidth="150">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="10"/>
<ColumnDefinition Width="1*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="135"/>
<RowDefinition Height="5"/>
<RowDefinition Height="30"/>
<RowDefinition Height="30"/>
</Grid.RowDefinitions>
<Rectangle Fill="{DynamicResource MutedWhite}" Grid.RowSpan="4" Grid.ColumnSpan="2"/>
<TextBlock x:Name="textBlock" Grid.Column="1" Text="{Binding Path=Title}" TextWrapping="Wrap" FontFamily="/Tasks;component/Assets/Fonts/#Abel" FontSize="24"/>
<Rectangle Fill="{DynamicResource MutedGrey}" Grid.Row="1" Grid.ColumnSpan="2"/>
</Grid>
C# Code Behind:
public partial class Card : UserControl
{
public Card()
{
InitializeComponent();
}
public string Title
{
get { return (string)GetValue(TitleProperty); }
set { SetValue(TitleProperty, value); }
}
public static readonly DependencyProperty TitleProperty =
DependencyProperty.Register("Title", typeof(string), typeof(Card), new UIPropertyMetadata(""));
}
and on MainWindow.xaml
<Objects:Card Grid.Column="1" Grid.Row="1" Title="Say Something Here"/>
The rectangles are rendering but my text is not rendering in the control
I have tested this by adding text without the binding which works fine. However the problem is at the binding. I want to have the ability to set the text object on main window through the use of a xaml tag but I cannot do this as it will not show me. Any help appreciated :)
The Text binding in the UserControl's XAML is missing a source object, which should be the UserControl instance.
One way to set the binding source to the UserControl instance is to set the RelativeSource property:
<TextBlock Text="{Binding Path=Title,
RelativeSource={RelativeSource AncestorType=UserControl}}" ... />
You may also set the x:Name attribute on the UserControl, and set the binding's ElementName:
<UserControl ... x:Name="self">
...
<TextBlock Text="{Binding Path=Title, ElementName=self}" ... />
...
</UserControl>
I am working on a WPF application that has a WinformsHost element. I try to set the cursor
for the winforms host element, but this does not have any effect. I tried to use the ForceCursor property of the window, but this seems to be ignored completely.
In my sample window I have a WPF Textblock on the left with a Hand cursor which is used properly, but on the right side where I have a WinForms PropertyGrid, I get the same behavior.
<Window x:Class="WpfWinformsCursor.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:wf="clr-namespace:System.Windows.Forms;assembly=System.Windows.Forms"
Title="MainWindow" Height="350" Width="525"
Cursor="ScrollAll"
ForceCursor="False"
>
<Grid Cursor="Pen">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid Grid.Column="0" Cursor="Help">
<TextBlock Cursor="Hand" />
</Grid>
<WindowsFormsHost Grid.Column="1" Cursor="ScrollNW">
<wf:PropertyGrid Cursor="Hand" />
</WindowsFormsHost>
</Grid>
</Window>
Can somebody help me how to do this correctly?
I'm new to WPF and am trying my hand at data binding, and haven't been able to find a solution to the problem that I am having. I am trying to make a window with a rectangle in it that I can dynamically switch between the left and right side of the screen, using the grid.column property. Here is my code so far, and I do not know where to go, if someone could suggest a decent website to read and solve my issue that would be nice too.
Here is my C# Code:
namespace WPFTestingApplication
{
public static class GridProperties
{
public static int gridColumn = 1;
}
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
}
}
and my XAML code:
<Window x:Class="WPFTestingApplication.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="200" Width="400">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Rectangle Name="Rect" Grid.Column="0" Fill="DarkGray" Margin="5" />
</Grid>
I want grid.column to be set to the gridColumn property in the GridProperties class.
<Window x:Class="WPFTestingApplication.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:WPFTestingApplication"
Title="MainWindow" Height="200" Width="400">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Rectangle Grid.Column="{Binding Source={x:Static local:GridProperties.gridColumn}"
Name="Rect" Fill="DarkGray" Margin="5" />
</Grid>
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.