WPF Border shape - c#

I want to create a popup like the one that Lync 2013 has:
What I´m interested in, is to create a control with that vignette shape.
I have tried creating a UserControl with a Canvas inside and a Path with the shape. But I was not finding Canvas very friendly, so I was wondering if I can achieve this by "playing" with the Border control, so as to put only a border and then a grid inside.
Is this possible? Can somebody help me to be in the right track?

This is my XAML:
<Window x:Class="CustomBorderStyle.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
LocationChanged="Window_LocationChanged"
Title="MainWindow" Height="350" Width="525">
<Grid>
<Border BorderBrush="Silver" BorderThickness="1">
<Button Content="Nice image button" Name="btnThingToClick" Width="100" Height="100" Click="btnThingToClick_Click" />
</Border>
<Popup Name="myPopup"
AllowsTransparency="True"
PlacementTarget ="{Binding ElementName=btnThingToClick}"
Placement="Custom">
<Grid x:Name="grid" Height="200" Width="200" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="40"/>
</Grid.RowDefinitions>
<Border BorderBrush="Silver" BorderThickness="1" Background="White" CornerRadius="5" Grid.Row="0" Padding="5">
<StackPanel Orientation="Vertical">
<TextBlock Text="Some stuff" />
<Button Content="Click me" Width="50" />
</StackPanel>
</Border>
<Path Fill="White" Stretch="Fill" Stroke="Silver" HorizontalAlignment="Left" Margin="30,-1.6,0,0" Width="25" Grid.Row="1"
Data="M22.166642,154.45381 L29.999666,187.66699 40.791059,154.54395"/>
</Grid>
</Popup>
</Grid>
</Window>
This is my code behind for the main window:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using System.Windows.Controls.Primitives;
namespace CustomBorderStyle
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
//wire up the popup to the popup placement method
myPopup.CustomPopupPlacementCallback = new CustomPopupPlacementCallback(placePopup);
}
private void btnThingToClick_Click(object sender, RoutedEventArgs e)
{
//just invert if it's open or not
myPopup.IsOpen = !myPopup.IsOpen;
}
//this is to position the popup next to the button
public CustomPopupPlacement[] placePopup(Size popupSize,
Size targetSize,
Point offset)
{
CustomPopupPlacement placement1 =
new CustomPopupPlacement(new Point(10, -200), PopupPrimaryAxis.Vertical);
CustomPopupPlacement placement2 =
new CustomPopupPlacement(new Point(10, 20), PopupPrimaryAxis.Horizontal);
CustomPopupPlacement[] ttplaces =
new CustomPopupPlacement[] { placement1, placement2 };
return ttplaces;
}
private void Window_LocationChanged(object sender, System.EventArgs e)
{
//if the popup is open when the window's location changes
if (myPopup.IsOpen)
{
//toggle the popup to redraw the location
myPopup.IsOpen = false;
myPopup.IsOpen = true;
}
}
}
}
You will obviously need some nice images to use for the buttons and some better stuff to put in the stackpanel so the popup looks nice, but that should do the job :)
The thing you have to be careful with is the positioning of the popup, this means if you change the height of the popup by adding more stuff you need to change the values of the "CustomPopupPlacement" objects, there might be a nice way to fix this??

I just wanted to paste some code that works for me:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Popup Placement="Top"
IsOpen="{Binding SettingsVisible}"
PopupAnimation="Fade"
AllowsTransparency="True">
<Grid Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Border Grid.Row="0" CornerRadius="10" Background="SkyBlue" HorizontalAlignment="Left">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0">Hello, world</TextBlock>
<Button Grid.Row="1">Click Me!</Button>
</Grid>
</Border>
<Path Grid.Row="1" VerticalAlignment="Bottom" Data="M 10 0 L 20 10 L 30 0 Z" Fill="SkyBlue" />
</Grid>
</Popup>
<Button Grid.Column="0" HorizontalAlignment="Left" Command="{Binding ToggleSettingsVisibility}">Settings</Button>
<Button x:Uid="Button_1" IsEnabled="{Binding SettingsVisible}" Grid.Column="1" HorizontalAlignment="Right" Padding="30, 10" Command="{Binding Next}">Next</Button>
</Grid>
My example features two buttons, important for this example is the 1st one (it is part of a wizard-like UI, but you can ignore the 2nd button).
I don't have the ViewModel here, but the mechanism is simple, the Settings-Button binds against the property ToggleSettingsVisibility which sets the SettingsVisibility the Popup binds against. All that is not really important for the example.
The result looks like this:
Of course, I still have to work on the styling ;-)

Related

Image not displaying in UserControl

I've found so many answers to this questions, but no matter what I try nothing seems to work.
I'm trying to create a UserControl in a UWP Application. The User Control consists of a Border, with an Image and a TextBlock inside of it. I managed to get the TextBlock text to show up, but no matter what I do I can't seem to get an Image to display in the UserControl.
Things tried so far:
Changing GraphicProperty typeof to Image, ImageSource, and Uri.
Placing the Image in the Border into a ContentPresenter.
Other things I can't remember at this point.
I'm at a loss as to how to get this to work. I know I've done this before, but it was several years ago and I've apparently fogotten how (or something significant changed with UWP, as most of my experience is in WPF).
Could someone please help find where I'm messing this up?
UserControl XAML:
<UserControl
x:Class="ShirtSleeves.CardControlxaml"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:ShirtSleeves"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
x:Name="CardControl"
mc:Ignorable="d"
d:DesignHeight="400"
d:DesignWidth="300">
<Grid>
<Border Margin="0,10" Background="White" BorderBrush="Black" BorderThickness="5" Width="260" Height="352" CornerRadius="20">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Image Source="{Binding ElementName=CardControl, Path=Graphic}" Height="200" Width="200" HorizontalAlignment="Center" VerticalAlignment="Bottom" />
<TextBlock Text="{Binding ElementName=CardControl, Path=Label}" Grid.Row="1" HorizontalAlignment="Center" VerticalAlignment="Top" Margin="0,30" Foreground="Black" FontSize="48" FontWeight="Bold" />
</Grid>
</Border>
</Grid>
</UserControl>
UserControl C#:
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;
// The User Control item template is documented at https://go.microsoft.com/fwlink/?LinkId=234236
namespace ShirtSleeves
{
public sealed partial class CardControlxaml : UserControl
{
//private TextBlock label;
public static DependencyProperty LabelProperty = DependencyProperty.Register("Label", typeof(string),
typeof(CardControlxaml), new PropertyMetadata("Label"));
public static DependencyProperty GraphicProperty = DependencyProperty.Register("Graphic", typeof(string),
typeof(CardControlxaml), new PropertyMetadata(null));
public string Label
{
get { return (string)GetValue(LabelProperty); }
set { SetValue(LabelProperty, value); }
}
public string Graphic
{
get { return (string)GetValue(GraphicProperty); }
set { SetValue(GraphicProperty, value); }
}
public CardControlxaml()
{
this.InitializeComponent();
}
}
}
MainPage XAML:
<Page
x:Class="ShirtSleeves.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:ShirtSleeves"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="1200"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid Background="DarkGreen">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="3*" />
</Grid.ColumnDefinitions>
<ScrollViewer Grid.Column="0">
<StackPanel>
<Border Margin="0,10" Background="White" BorderBrush="Black" BorderThickness="5" Width="260" Height="352" CornerRadius="20">
<TextBlock Text="Games" HorizontalAlignment="Center" VerticalAlignment="Bottom" Margin="0,30" Foreground="Black" FontSize="48" FontWeight="Bold" />
</Border>
<Border Margin="0,10" Background="White" BorderBrush="Black" BorderThickness="5" Width="260" Height="352" CornerRadius="20">
<TextBlock Text="Sleeves" HorizontalAlignment="Center" VerticalAlignment="Bottom" Margin="0,30" Foreground="Black" FontSize="48" FontWeight="Bold" />
</Border>
<local:CardControlxaml Label="Search" Graphic="C:\Users\<username>\source\repos\ShirtSleeves\ShirtSleeves\Images\Rook (Games).png" Foreground="Black" />
<Image Height="250" Source="C:\\Users\\<username>\\source\\repos\\ShirtSleeves\\ShirtSleeves\\Images\\Rook (Games).png" HorizontalAlignment="Center" VerticalAlignment="Center" />
</StackPanel>
</ScrollViewer>
<Viewbox Grid.Column="1">
<Image Source="C:\Users\<username>\source\repos\ShirtSleeves\ShirtSleeves\Images\Rook (Games).png" VerticalAlignment="Top" HorizontalAlignment="Center" />
</Viewbox>
</Grid>
</Page>
UWP doesn't allow to access files outside the app container directly. This means that you could not set the image source like this C:\Users\<username>\source\repos\ShirtSleeves\ShirtSleeves\Images\Rook (Games).png.
In your case, the simplest way is to put the image into your project's Assets folder like the following:
Then, you could specify the 'Graphic' property like this:
<local:CardControlxaml Label="Search" Graphic="Assets/animals.jpg" Foreground="Black" />
More information, please read File access permissions.

Problems with dynamic height in Windows Phone 8 (see sketch inside)

I'm currently fiddling with a Windows Phone 8 Gui but i have run into some problems. The idea is rather simple:
There's a scrollviewer in the App that has 3 items in it. One of them (A) is always visible and has a fixed height. The two others (B and C) are supposed to have a dynamic height that uses the rest of the available screenspace in the scrollviewer (see sketch)
I have not been able to either
1) Find a XAML definitions that allows me to set-up the layout in the described way. The main Problem is getting the content in the scrollviewer to automatically have the correct height for the scrolling to happen and everything to line up exactly.
or
2) Dynamically set the correct height for all items in the code behind. My main problem here is getting the heights of the dynamically sized objects. Whatever i try i either get 0,0 or 0 or NaN.
here is the XAML code i have so far
<phone:PhoneApplicationPage
x:Class="PhoneApp1.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait" Orientation="Portrait"
shell:SystemTray.IsVisible="True">
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="224"/>
<RowDefinition/>
</Grid.RowDefinitions>
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="0,0,0,108">
<TextBlock x:Name="subtitle" Text="Help Me" Style="{StaticResource PhoneTextNormalStyle}" Margin="12,0"/>
<TextBlock x:Name="title" Margin="0" Style="{StaticResource PhoneTextTitle1Style}">
<Run Text="StackOverflow"/>
<Run Text="!"/>
</TextBlock>
</StackPanel>
<Grid x:Name="ContentPanel" Margin="0,136,0,0" Grid.RowSpan="2">
<ScrollViewer x:Name="mainScrollViewer" HorizontalAlignment="Left" VerticalAlignment="Top" Height="633" Margin="0">
<Grid x:Name="contentGrid" HorizontalAlignment="Left" VerticalAlignment="Center">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="300"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!--Here are my Elements A, B, C -->
<Image x:Name="element_B" Grid.Row="0" Stretch="Fill" Source="/Assets/b5xhG.png"/>
<Image x:Name="element_A" Grid.Row="1" Stretch="Fill" Source="/Assets/b5xhG.png"/>
<Image x:Name="element_C" Grid.Row="2" Stretch="Fill" Source="/Assets/b5xhG.png"/>
</Grid>
</ScrollViewer>
</Grid>
</Grid>
</phone:PhoneApplicationPage>
and here's my minimal code behind
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Navigation;
using Microsoft.Phone.Controls;
using Microsoft.Phone.Shell;
using PhoneApp1.Resources;
namespace PhoneApp1
{
public partial class MainPage : PhoneApplicationPage
{
// Konstruktor
public MainPage()
{
InitializeComponent();
/*when the app starts, the height of the ContentGrid should be equal to the height of the Scrollviewer,
* therefore the height that element A and B should be together*/
var BAndCHeight = contentGrid.Height - element_A.Height;
/*with that in mind, the new height of the Content in the Scrollviewer should be */
var contentGridSupposedHeight = 2 * BAndCHeight + element_A.Height;
}
}
}
Can anyone give me a hint how this is supposed to be done? Maybe I'm missing something. If not, how do i get the correct heights of the Elements so i can scale them myself?
Thanks for your help!
You may want to try ActualHeight instead of Height.
This Should give the current height of the elements.
var BAndCHeight = contentGrid.ActualHeight - element_A.ActualHeight;
This may only be used during or after the Loaded event because the elements are actually rendered during the Loaded event.
I hope this helps.
I think no need to set dynamically height of any element, Your issue should be resolved in your xaml. May this will help you, You can copy paste xaml.
<phone:PhoneApplicationPage
x:Class="PhoneApp1.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait" Orientation="Portrait"
shell:SystemTray.IsVisible="True">
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackPanel x:Name="TitlePanel" Grid.Row="0" >
<TextBlock x:Name="subtitle" Text="Help Me" Style="{StaticResource PhoneTextNormalStyle}" Margin="12,0"/>
<TextBlock x:Name="title" Margin="0" Style="{StaticResource PhoneTextTitle1Style}">
<Run Text="StackOverflow"/>
<Run Text="!"/>
</TextBlock>
</StackPanel>
<Grid x:Name="ContentPanel" Margin="0,10,0,0" Grid.Row0="1">
<ScrollViewer x:Name="mainScrollViewer" Margin="0">
<Grid x:Name="contentGrid" HorizontalAlignment="Left" VerticalAlignment="Center">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<!--Here are my Elements A, B, C -->
<Image x:Name="element_B" Grid.Row="0" Stretch="Fill" Source="/Assets/b5xhG.png"/>
<Image x:Name="element_A" Grid.Row="1" Stretch="Fill" Source="/Assets/b5xhG.png"/>
<Image x:Name="element_C" Grid.Row="2" Stretch="Fill" Source="/Assets/b5xhG.png"/>
</Grid>
</ScrollViewer>
</Grid>
</Grid>
</phone:PhoneApplicationPage>
To get the sizes right in the contentGrid, try this:
Set all your row heights to "Auto" in XAML
Then in your Loaded event handler, find which row has the largest ActualHeight and then set the heights of the other two rows to size "*"
void PhoneApplicationPage_Loaded(object sender, RoutedEventArgs e)
{
double h = -1;
for (int row = 0; row < 3; row++)
if (contentGrid.RowDefinitions[row].ActualHeight > h)
h = contentGrid.RowDefinitions[row].ActualHeight;
for (int row = 0; row < 3; row++)
if (contentGrid.RowDefinitions[row].ActualHeight < h)
contentGrid.RowDefinitions[row].Height = new GridLength(1, GridUnitType.Star);
}
contentGrid.RowDefinitions[tallestRow].Height = System.Windows.GridLength.Auto;
}

Error template not working when a ControlTemplate is applied to the window

I have a simple application with App.xaml, MainWindow.xaml and a Person class. When I don't specify the template, my ValidateOnDataErrors works perfectly, putting a red border around my textbox when it is in error. However, as soon as I insert the ' Template="{StaticResource WindowTemplate}" ' in the Window tag of my MainWindow.xaml, the field is still validated but the red border disappears.
App.xaml :
<Application x:Class="WpfPOC.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
StartupUri="MainWindow.xaml">
<Application.Resources>
<ControlTemplate TargetType="Window" x:Key="WindowTemplate">
<Grid Background="{TemplateBinding Background}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Control x:Name="FocusCatcher"></Control>
<TextBlock>Menu Section</TextBlock>
<ContentPresenter Grid.Row="1" />
<StatusBar Height="23" VerticalAlignment="Bottom" Grid.Row="2">
<TextBlock Text="Current Editing Mode" />
</StatusBar>
</Grid>
</ControlTemplate>
</Application.Resources>
</Application>
MainWindow.xaml :
<Window x:Class="WpfPOC.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:data="clr-namespace:WpfPOC"
Template="{StaticResource WindowTemplate}"
Title="MainWindow"
Height="350"
Width="525">
<Window.Resources>
<data:Person x:Key="myDataSource" Name="Joe"/>
</Window.Resources>
<Grid>
<TextBox Height="23" Width="120" Text="{Binding Source={StaticResource myDataSource}, Path=Name, ValidatesOnDataErrors=True}" />
</Grid>
</Window>
Person.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.ComponentModel;
namespace WpfPOC
{
public class Person : IDataErrorInfo
{
public string Name { get; set; }
#region IDataErrorInfo Members
public string Error
{
get { return string.Empty; }
}
public string this[string columnName]
{
get { return "Simulated error"; }
}
#endregion
}
}
Thank you in advance for your help.
This happens because the default ControlTemplate used for displaying validation errors (draws a red border around the control) uses the AdornerLayer.
You have created a new ControlTemplate for the entire Window and left out the AdornerDecorator (which the default ControlTemplate for Window supplies)
So just wrap your new ControlTemplate with a AdornerDecorator like so:
<ControlTemplate TargetType="Window" x:Key="WindowTemplate">
<AdornerDecorator>
<Grid Background="{TemplateBinding Background}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Control x:Name="FocusCatcher"></Control>
<TextBlock>Menu Section</TextBlock>
<ContentPresenter Grid.Row="1" />
<StatusBar Height="23" VerticalAlignment="Bottom" Grid.Row="2">
<TextBlock Text="Current Editing Mode" />
</StatusBar>
</Grid>
</AdornerDecorator>
</ControlTemplate>

How to place an XAML usercontrol in a 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.

How to change BitmapEffect in custom WPF control via C# code

I have a custom control type like: <Grid> ... </Grid> and Grid.BitmapEffect property. How can I change BitmapEffetc in this Control (Grid) via C# code (e.g. on event)?
Code sample - part of custom control:
[...]
<Grid Background="#FFE5AA">
<Grid.RowDefinitions>
<RowDefinition Height="62*"/>
<RowDefinition Height="15*"/>
<RowDefinition Height="23*"/>
</Grid.RowDefinitions>
<Grid.BitmapEffect>
<OuterGlowBitmapEffect GlowColor="#459E5A" GlowSize="13" Noise="0" Opacity="0.9" />
</Grid.BitmapEffect>
<Border Grid.Column="0" Grid.Row="0" Grid.RowSpan="3" BorderBrush="#F5B903" BorderThickness="1,1,1,1" >
</Border>
[...]
Then in Window.xaml:
<controls:MyControl Name="Control1" Cursor="Hand" MouseDown="Control1_MouseDown" />
Then in C#:
private void Control1_MouseDown(object sender, MouseButtonEventArgs e)
{
//there i want to change Control1.BitmapEffect
}
myGrid.BitmapEffect = null;
PS: Note that BitmapEffect is considered obsolete and that Effect should be used instead.
Here's an example based on your sample which works perfectly fine (here on my machine): As soon as I click within the Grid, the effect disappears.
XAML:
<Window x:Class="WpfCsApplication1.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="300" Width="300">
<Grid Background="#FFE5AA" Margin="10" MouseDown="Grid_MouseDown" x:Name="myGrid">
<Grid.RowDefinitions>
<RowDefinition Height="62*"/>
<RowDefinition Height="15*"/>
<RowDefinition Height="23*"/>
</Grid.RowDefinitions>
<Grid.BitmapEffect>
<OuterGlowBitmapEffect GlowColor="#459E5A" GlowSize="13" Noise="0" Opacity="0.9" />
</Grid.BitmapEffect>
<Border Grid.Column="0" Grid.Row="0" Grid.RowSpan="3" BorderBrush="#F5B903" BorderThickness="1,1,1,1" >
<TextBlock>Test</TextBlock>
</Border>
</Grid>
</Window>
Codebehind:
public partial class Window1 : Window {
public Window1() {
InitializeComponent();
}
private void Grid_MouseDown(object sender, MouseButtonEventArgs e) {
myGrid.BitmapEffect = null;
}
}
In your example you write: //there i want to change Control1.BitmapEffect. Note that you need to change the BitmapEffect of the Grid, not the BitmapEffect of Control1.
OK, I've got it! I was add an DepencyProperty 'GlowSize' and simply change size of glow via it. :) Works perfect.
Different effects are listed here : Different BitmapEffect

Categories

Resources