I have gridview with custom usercontrols.
Here's the XAML of the usercontrol:
<UserControl
x:Class="App11.VideoPreview"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App11"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="250"
d:DesignWidth="250">
<Grid>
<Button Height="250" Width="250" Padding="0" BorderThickness="0">
<StackPanel>
<Image Name="image1" Height="250" Width="250" Stretch="None"/>
<Grid Margin="0,-74,0,0">
<Grid.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0" Opacity="0.5">
<GradientStop Color="Black"/>
<GradientStop Color="#FF5B5B5B" Offset="1"/>
</LinearGradientBrush>
</Grid.Background>
<TextBlock x:Name="textBox1" TextWrapping="Wrap" FlowDirection="RightToLeft" Foreground="White" Padding="5"/>
</Grid>
</StackPanel>
</Button>
</Grid>
</UserControl>
how can I capture the click event when the button is clicked inside gridview?
I tried GridView_ItemClick, GridView1_SelectionChanged in the .cs of the gridview page
I also tried button_Click in the .cs of the usercontrol page
Both didnt work for me. any idea why?
EDIT:
It did work. I just tried to change frame using Frame.Navigate(typeof(PageName));
I cant change frame from usercontrol, I had to send the current frame to the usercontrol in the build function and then change the frame, like this:
Frame frame;
public VideoPreview(Frame f)
{
this.InitializeComponent();
frame = f;
}
private void Button_Click(object sender, RoutedEventArgs e)
{
frame.Navigate(typeof(PlayVideo));
}
Try to look into MVVM pattern http://www.codeproject.com/Articles/165368/WPF-MVVM-Quick-Start-Tutorial and use Commands instead of events.
<Button Command="{Binding SomeActionCommand}" />
This will make your code much cleaner and reliable.
Related
I want to achieve Grid Left Click inside a user control.
My WPF User Control
<Grid>
<Border Grid.Row="0" CornerRadius="7" >
<Border.Background>
<SolidColorBrush Color="#ffffff" Opacity="0.08"></SolidColorBrush>
</Border.Background>
<Grid>
<Image Source="/Assets/Images/Icon/ic-add.png" Width="70" Height="70"/>
</Grid>
</Border>
</Grid>
Here is my Window
<Grid>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
<usercontrols:CreateNewProfile Width="200" Height="235" Margin="40,40,0,0">
</usercontrols:CreateNewProfile>
</<StackPanel>
</Grid>
There is a command Called CreateNewProfile
Very straight question How to bind command on Left Click of User Control?
You can use InputBindings inside of your UserControl:
<Grid.InputBindings>
<MouseBinding MouseAction="LeftClick" Command="{Binding CreateNewProfile}"/>
</Grid.InputBindings>
I have simple WPF app, main window, and button, that on click creates a new modal child
window via my window manager:
class WindowManager : IWindowManager
{
public void AddNewViewWindow()
{
var someWindow = new AddNewView();
someWindow.ShowInTaskbar = false;
someWindow.Owner = Application.Current.MainWindow;
someWindow.ShowDialog();
}
}
MainWindow:
<Window x:Class="LogView.Views.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:prism="http://prismlibrary.com/"
prism:ViewModelLocator.AutoWireViewModel="True"
Title="{Binding Title}" Height="350" Width="525">
<StackPanel>
<StackPanel Orientation="Horizontal">
<ContentControl prism:RegionManager.RegionName="ContentRegion" />
<Button Name="AddNewControl" Content="Add New Control" Command="{Binding AddNewViewCommand}" Margin="10">
<Button.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Black" Offset="0"/>
<GradientStop Color="White" Offset="1"/>
</LinearGradientBrush>
</Button.Background>
</Button>
<CheckBox Name="EditMode" Content="Edit mode" IsChecked="{Binding EditModeEnabled}" Margin="10"/>
</StackPanel>
</StackPanel>
</Window>
ModalChildWindow:
<Window x:Class="LogView.Views.AddNewView"
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:LogView.Views"
xmlns:prism ="http://prismlibrary.com/"
prism:ViewModelLocator.AutoWireViewModel="True"
mc:Ignorable="d"
Title="AddNewView" Height="450" Width="800">
<StackPanel>
<TreeView ItemsSource="{Binding DeviceSets}" >
<TreeView.ItemTemplate>
<DataTemplate>
<TreeViewItem Header="{Binding Name}" ItemsSource="{Binding Registers}">
<TreeViewItem.ItemTemplate>
<DataTemplate>
<TextBox Text="{Binding Name}">
</TextBox>
</DataTemplate>
</TreeViewItem.ItemTemplate>
</TreeViewItem>
</DataTemplate>
</TreeView.ItemTemplate>
</TreeView>
</StackPanel>
</Window>
I am also using Prism, my bootstrapper:
class Bootstrapper : UnityBootstrapper
{
protected override DependencyObject CreateShell()
{
return Container.Resolve<MainWindow>();
}
protected override void InitializeShell()
{
Application.Current.MainWindow.Show();
}
protected override void ConfigureContainer()
{
base.ConfigureContainer();
RegisterTypeIfMissing(typeof(IWindowManager), typeof(WindowManager), true);
}
protected override void ConfigureModuleCatalog()
{
var moduleCatalog = (ModuleCatalog)ModuleCatalog;
moduleCatalog.AddModule(typeof(WebSocketClientModule));
}
}
Now, I am experiencing this strange behavior:
When I click the button, modal child window shows up. Everything is fine, I can't click on parent(MainWindow) window. Then, if I minimalize this child modal window, and then bring it back on, the child window stops being modal. I can click on MainWindow and create a second modal window ( the first one is still visible). What is even weird, the second modal window is truly modal, when I minimalize it, bring it on I cannot click on the parent window. If I close the second modal window, I can create it again.
Greetings
I have a project consisting of two pages. One page is having th XAML of a User control developed by me.
The another page has the logic of cropping the image that is present in the image box on that page. I want to use my control on that page and assign the border background of the user control to the image cropped .
The following code is of my UserControl XAML ! The cs file for this page has no code implementation
<UserControl
x:Class="controlMagnifier.MagnifierUsercontrol"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:controlMagnifier"
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">
<Canvas x:Name="controlCanvas" x:FieldModifier="public" Margin="112,0,108,0">
<Canvas.RenderTransform>
<RotateTransform>
</RotateTransform>
</Canvas.RenderTransform>
<Grid Height="250" Width="176" Canvas.Left="41" Canvas.Top="40" Margin="-40,0,0,0">
<Border x:FieldModifier="public" x:Name="imgBorder" Width="150" CornerRadius="50,50,50,50" Margin="13,25,13,97">
<Border.Background>
<ImageBrush x:Name="image1" ImageSource="/Assets/images.jpg" />
</Border.Background>
</Border>
<TextBlock x:Name="txtreading" Height="30" Width="80" Margin="0,-145,0,0" FontWeight="Bold" Foreground="Red" FontSize="20" Text="ABC" TextAlignment="Center" />
<!--<Image Height="120" Width="150" Margin="0,-50,0,0" Source="Assets/SmallLogo.scale-100.png" ></Image>-->
<Path x:Name="MagnifyTip" Data="M25.533,0C15.457,0,7.262,8.199,7.262,18.271c0,9.461,13.676,19.698,17.63,32.338 c0.085,0.273,0.34,0.459,0.626,0.457c0.287-0.004,0.538-0.192,0.619-0.467c3.836-12.951,17.666-22.856,17.667-32.33 C43.803,8.199,35.607,0,25.533,0z M25.533,32.131c-7.9,0-14.328-6.429-14.328-14.328c0-7.9,6.428-14.328,14.328-14.328 c7.898,0,14.327,6.428,14.327,14.328C39.86,25.702,33.431,32.131,25.533,32.131z" Fill="#FFF4F4F5" Stretch="Fill" Stroke="Black" UseLayoutRounding="False" Height="227" Width="171" />
</Grid>
</Canvas>
</UserControl>
In the user control XAML , we can see that I have set the
to a static image. I want to access this user control to another page and want to assign the element to the cropped image output on the other page. The other page MainPage.Xaml has the code for image cropping.
Any help would be appreciated
Is there chance to create a WPF Popup as a separate control, so it is not inside a window or user control?
I have a popup written in XAML:
<Popup PopupAnimation="Fade" Name="MyPopup" MinWidth="200" MinHeight="100" Width="200" Height="100" Placement="Center" VerticalAlignment="Center" HorizontalAlignment="Center" IsEnabled="True" IsOpen="False">
<Grid Width="Auto" Height="Auto" Background="Gray">
<Grid.RowDefinitions>
<RowDefinition Height="30"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Border BorderThickness="2" CornerRadius="8" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.RowSpan="2">
<Border.BorderBrush>
<SolidColorBrush Color="Gray"/>
</Border.BorderBrush>
<Border.Background>
<SolidColorBrush Color="White"/>
</Border.Background>
</Border>
<StackPanel Grid.Row="0">
<Label Foreground="Blue" Content="Popup_Title"/>
</StackPanel>
<GroupBox Grid.Row="1" Header="Popup example content">
<StackPanel>
</StackPanel>
</GroupBox>
</Grid>
</Popup>
Now, on button click of my other control, I would like to do something like this:
private void Button_Click(object sender, RoutedEventArgs e)
{
PopupControl p = new PopupControl();
p.IsOpen = true;
}
By looking at the example of UserControl or Window, I understand that I need to connect this popup with the actual c# class, something like:
public partial class PopupControl : Popup
{
public PopupControl()
{
InitializeComponent();
}
}
and then inside the Popup's XAML add class:
x:Class="WpfApplication1.PopupControl".
but two things:
1) There is no such a thing as x:Class for PopUp
2) Deriving from Popup won't have InitializeComponent(); method.
You almost got it right. While copy-pasting your Popup code in its own XAML file, you didn't add the necessary x namespace that contains the attached property x:Class:
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
As soon as you add this to your root element (Popup), you can add x:Class="WpfApplication1.PopupControl". This will lead to the generation of a partial class in your obj folder that contains the InitializeComponent method that you were missing.
The easiest way to do that is by
creating a new UserControl from the "Add Item" dialog.
Then, rename the root element from UserControl to Popup.
Finally, from the code behind class, just remove : UserControl.
I have my application and now I want to add a close button. I created it in the designer with a Image (Maybe there is a better way! If so, please answer) and everything seems to work:
Then I run the application and it looks like this:
Why isn't there the button / Image anymore? I have no idea!
BTW, the picture is a .png and is saved in the resources!
my wpf code:
<Window x:Class="Chat_App.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="500" Width="1000" WindowStyle="None" AllowsTransparency="True">
<Window.Background>
<RadialGradientBrush>
<GradientStop Color="#FF323A44" Offset="1"/>
<GradientStop Color="#FF384A5A"/>
</RadialGradientBrush>
</Window.Background>
<Grid>
<Border BorderThickness="1" Height="26" VerticalAlignment="Top" Background="#FF436B85" MouseLeftButtonDown="Border_MouseLeftButtonDown">
<Image HorizontalAlignment="Left" Height="20" VerticalAlignment="Top" Width="33" Source="pack://siteoforigin:,,,/Resources/simat_btn_chat.png" MouseLeftButtonDown="Image_MouseLeftButtonDown" Margin="963,2,0,0"/>
</Border>
</Grid>
</Window>
BTW, I tried it with a ico file too!
Thank you!
Remove the verticalAlighment and horizontalAlignment of image and wrap it inside a grid, It should be like this,
<Border BorderThickness="1" Height="26" VerticalAlignment="Top" Background="#FF436B85">
<Grid HorizontalAlignment="Right" Width="24">
<Image Source="Images/download.jpg" Margin="0,0,0,0" d:LayoutOverrides="Width"/>
</Grid>
</Border>
try adding it as a resource (enables reusability too!)
<Window.Resources>
<Image x:Key="MyImage" Source.../>
</Window.Resources>
Then use it in your Grid as:
<Button Content={StaticResource MyImage} />
Also, make sure your image is built as a Resource
EDIT: The button is showing up, but not your image. So it cannot find it properly. Try changing your pack url.
Either like,
Source="pack://application:,,,/Resources/simat_btn_chat.png"
or
Source="/Resources/simat_btn_chat.png"