How to make a simple ContentDialog in .xaml? - c#

What would it take to create a ContentDialog?
I basically have a button. When I tap that button the ContentDialog opens. The ContentDialog shall include a text like "this is an example" and 2 Buttons. How does the <ConTentDialog></ContentDialog> have to look like? Example:
<Page
x:Class="PDFViewerSDK_Win10.PDFReaderPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:PDFViewerSDK_Win10"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" SizeChanged="OnSizeChanged">
<ContentDialog x:Name="test" PrimaryButtonText="Ok" SecondaryButtonText="Cancel" Style="{StaticResource AppBarButtonStyle}" Tapped="OnOptionItemTapped" >
<Image Source="Assets/images/icon_menu.png"/>
</ContentDialog>
</Page>

A content dialog can be easily created in your code-behind. You can then have that C# code run on the click event for the button you mentioned you wanted.
Your other option is to create a content dialog on XAML, as you already posted in your original question, so that when the button is clicked, you just refer to the content dialog on your code-behind and call the ShowAsync() method.
I could write example code in this response, but in the interest of this question being relevant to visitors in the future I encourage you to refer to Microsoft's documentation which will be better maintained. I already read it and it does have specific examples that will be of great help to you.
Edit:
Posting sample code as a reference.
MainPage.XAML:
<Grid>
<Button
HorizontalAlignment="Center"
VerticalAlignment="Center"
Height="100" Width="250"
Content="Show Content"
FontSize="30px"
x:Name="ContentBtn"
Click="ContentBtn_Click"/>
<ContentDialog x:Name="ContentDialog"
Title="This is an example"
PrimaryButtonText="Ok"
CloseButtonText="Cancel"
DefaultButton="Primary">
</ContentDialog>
</Grid>
MainPage.XAML.cs:
private async void ContentBtn_Click(object sender, RoutedEventArgs e) {
await ContentDialog.ShowAsync();
}

Related

AvaloniaUI - ExtendClientAreaToDecorationsHint and Panel

I will improve my skill to developp in C#. I used to developp in C++ and Python.
I already train my self with consol application and I found the implementation of the POO paradigme very strong.
So I will try to produce UI like I can do in C++ and Python.
I follow this tutoriel : http://avaloniaui.net/docs/advanced-tutorial/
But I haven't the expected result like in the chapter : create-a-modern-window.
My windows buttons close, minimize and maximize are behind the panel. So It's hard to see this buttons. voir image
Of course, if I had Margin on the panel or if I remove panel, buttons is correctly visible.
It seems to me logic, that if I put a panel in front of something, it gives this result.
But the tutorial give nothing more and I check on the github : https://github.com/AvaloniaUI/Avalonia.MusicStore/tree/master/Avalonia.MusicStore and I found no difference with my code.
So do you have an idear of the problem or how to solves them ?
I work on Windows 10 with Avalovia 0.10.0.
My main window :
<Window xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:vm="using:Avalonia.MusicStore.ViewModels"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
x:Class="Avalonia.MusicStore.Views.MainWindow"
Icon="/Assets/avalonia-logo.ico"
Title="Avalonia.MusicStore"
TransparencyLevelHint="AcrylicBlur"
WindowStartupLocation="CenterScreen"
Background="Transparent"
ExtendClientAreaToDecorationsHint="True">
<Design.DataContext>
<vm:MainWindowViewModel/>
</Design.DataContext>
<Panel>
<ExperimentalAcrylicBorder IsHitTestVisible="False">
<ExperimentalAcrylicBorder.Material>
<ExperimentalAcrylicMaterial
BackgroundSource="Digger"
TintColor="Black"
TintOpacity="1"
MaterialOpacity="0.65" />
</ExperimentalAcrylicBorder.Material>
</ExperimentalAcrylicBorder>
<Panel Margin="40">
<Button Content="Buy Music" Command="{Binding BuyMusicCommand}" HorizontalAlignment="Right" VerticalAlignment="Top">
<PathIcon Data="{StaticResource store_microsoft_regular}"/>
</Button>
</Panel>
</Panel>
</Window>
And my App.axaml
Application xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Avalonia.MusicStore"
x:Class="Avalonia.MusicStore.App">
<Application.DataTemplates>
<local:ViewLocator/>
</Application.DataTemplates>
<Application.Styles>
<FluentTheme Mode="Dark"/>
<StyleInclude Source="avares://Avalonia.MusicStore/Icons.axaml"/>
</Application.Styles>
</Application>
Thank you in advance for your help :)
Unfortunately there was a minor bug in 0.10 release.
Please set on your Window the following property:
ExtendClientAreaChromeHints="PreferSystemChrome"

MouseDown event of image in usercontrol not fireing

I made a usercontrol in WPF with an image in it. I declared a MouseDown event for this image:
<Image x:Name="imgState" Height="300" Width="300" MouseDown="imgState_MouseDown" OpacityMask="#00000000" />
I placed this usercontrol on my application form, but the event isn't fireing. I'm pretty new to WPF and I read about RoutedEvents but I don't really understand it. I would be happy if someone could help and explain this to me!
Update
Changing to PreviewMouseDown didn't fire the event too. I tried setting the background to transparent and even tried with a blank 300x300 image. The grid workaround doesn't fire the event too. Here is how my code behind looks like:
private void imgState_MouseDown(object sender, MouseButtonEventArgs e)
{
//Some code here
}
Update 2
Here is my whole XAML file:
<UserControl x:Class="TicTacToe.controls.SingleField"
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>
<Image x:Name="imgState" MouseDown="imgState_MouseDown" Height="300" Width="300" Stretch="None" OpacityMask="#00000000"/>
</Grid>
</UserControl>
I removed the source again because I set one from code behind at runtime and adding a transparent/clear image didn't helped.
You probably want PreviewMouseUp instead of MouseDown event
<Image x:Name="imgState" Height="300" Width="300"
PreviewMouseUp="ImgState_OnPreviewMouseUp"
PreviewMouseDown="ImgState_OnPreviewMouseDown"/>
Either of the two, you can capture the event from there.
If the answer above does not help:
Not a very nice solution but does work so many times:
Wrap your image with a grid on which you will have your event...
<Grid MouseDown="imgState_MouseDown">
<Image/>
</Grid>
Okay I solved the problem myself.
The problem was the setting OpacityMask="#00000000" that prevented the image from appearing so there were, as #lll said, nothing to hit. I don't know when the setting was set, but I think it happened automatically while expanding the Representation tab.
Thanks for helping me!

Command Binding with WPF

Im a complete Noob to this so im having a really hard time wrapping my head around how this works.
Basically I have a Main Page that im using, and within the XAML i have created a menu
What I have is a Document (DummyDoc) that contains a TextBox within it that i am trying to send the find command to.
Ive tried this every which way and googled it but i just cant seem to get it to work for me and could use some help with a push in the right direction
Main form
<Window>
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:i="clr-namespace:DMC_Robot_Editor"
xmlns:local="clr-namespace:DMC_Robot_Editor.GUI"
<Menu>
<MenuItem Header="_Edit">
<MenuItem Header="_Cut"/>
</MenuItem>
<MenuItem/>
<Grid>
<local:DummyDoc x:Name="_Editor"/>
</Grid>
</Window>
That is the main form that i am using. then i have my second document "DummyDoc"
<ad:DocumentContent x:Name="document" x:Class="DMC_Robot_Editor.Controls.DummyDoc"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:ad="clr-namespace:AvalonDock;assembly=AvalonDock"
xmlns:local="clr-namespace:DMC_Robot_Editor.Controls"
xmlns:ed="schemas.microsoft.com/expression/2010/drawing"
Title="Window1" Height="300" Width="300"
IsVisibleChanged="Is_VisibleChanged" PropertyChanged="document_PropertyChanged">
<Grid>
<Menu >
<MenuItem Header="_File">
<MenuItem Header="was here"/>
</MenuItem>
</Menu>
<local:Editor x:Name="source" IsVisibleChanged="Is_VisibleChanged" TextChanged="TextChanged" UpdateFunctions="raiseupdated" />
<local:Editor x:Name="data" Visibility="Hidden" IsVisibleChanged="Is_VisibleChanged" TextChanged="TextChanged" UpdateFunctions="raiseupdated"/>
</Grid>
</ad:DocumentContent>
DummyDoc is a window that has an Inherited Editor in it.
<avalonedit:TextEditor
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:avalonedit="http://icsharpcode.net/sharpdevelop/avalonedit"
x:Class="DMC_Robot_Editor.Controls.Editor"
x:Name="editor"
mc:Ignorable="d"
d:DesignHeight="300"
d:DesignWidth="300"
TextChanged="Text_Changed"
IsVisibleChanged="raiseUpdate"
MouseMove="Mouse_Move"
MouseHover="Mouse_Hover"
MouseHoverStopped="Mouse_Hover_Stopped" KeyUp="editor_KeyUp">
</avalonedit:TextEditor>
My Ultimate Question is how do i use WPF Binding to make the "Cut" Action from the main form initiate the cut() method of the textbox?
I wrote textbox in it because in code behind, im doing the following
partial class DummyDoc:DocumentContent
{
public Editor TextBox{get;set;}
private void Is_VisibleChanged(object sender, DependencyPropertyChangedEventArgs e)
{
if (sender is Editor)
this.TextBox = sender as Editor;
if ((VisibilityChanged != null) && (TextBox != null))
raiseupdated(TextBox, new FunctionEventArgs(this.TextBox.Text));
}
}
ElementName looks up elements by looking for an element which is using the string identifier you specify.
Did you put x:Name="local:TextBox" on your TextBox tag?
I think you've got your wires crossed by using "local:TextBox".
For starters...that is the syntax used to refer to an element type within a namespace .... it means "the type TextBox in the local namespace".....it's not valid (or rather doesn't mean the same) in the context you are using....you should just assign an "identifier" string.
So....
CommandTarget="{Binding ElementName=textboxFind}"
...
<TextBox x:Name="textboxFind" ..... />
would be more appropriate.
UPDATE (in light of question being clarified):
You should specify a "Command" in your menu item which will get raised when you choose that menu item.
Then if the TextEditor has the focus (...and thus is the command target...)....then it should see the Cut command.
I would expect the Avalon Editor to be able to handle the well know "ApplicationCommands" i.e. Cut, Copy, Paste, etc.
<MenuItem Header="_Cut" Command="ApplicationCommands.Cut">

How do i navigate from one Xaml file to another?

I am very new to XAML and WPF.I have a problem.
I have two files. first.xaml and second.Xaml. There is a button in first.xaml, on click of which it should navigate to second.xaml.How do i achieve this.
This is one way of organising the code:
Your second.xaml should contain your window definiton e.g.:
<Window x:Class="MediaCheckerWPF.AboutBox"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="About Media Checker" Height="300" Width="400" ResizeMode="NoResize"
Icon="/MediaCheckerWPF;component/Resources/checker.ico"
ShowInTaskbar="False">
<Grid>
...
</Grid>
</Window>
Your first.xaml has the button e.g.:
<Button Height="23" HorizontalAlignment="Right" Name="aboutButton"
VerticalAlignment="Top" Width="23" Click="AboutButton_Click"
Content="{DynamicResource TInformationButton}"
ToolTip="{DynamicResource TInformationButtonTooltip}" Margin="0,0,8,0"/>
Then in the code behind:
private void AboutButton_Click(object sender, RoutedEventArgs e)
{
var about = new AboutBox { Owner = this };
about.Initialise();
about.Show();
}
ChrisF's answer is a good way of popping up a new window in a Windows-style application, except you should not call Initialize that way (it should be called from the constructor).
If you want web-style navigation instead, you should use the Page class instead of Window, along with NavigationService. This also allows your WPF application to run inside an actual web browser.

How to get a simple hyperlink to work in XAML?

When I run this and click on the link, I would expect a browser to open and it go to google, but nothing happens:
<Window x:Class="TestHyperlink2343.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>
<TextBlock>
You and read this or
<Hyperlink NavigateUri="http://www.google.com">go to google</Hyperlink>
etc.
</TextBlock>
</Grid>
</Window>
So then I replace the above code with the following and still nothing happens. However, surprisingly, if I right click on the link, it goes to google:
<Window x:Class="TestHyperlink2343.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>
<TextBlock>
You and read this or
<Hyperlink MouseDown="Hyperlink_MouseDown">go to google</Hyperlink>
etc.
</TextBlock>
</Grid>
</Window>
private void Hyperlink_MouseDown(object sender, MouseButtonEventArgs e)
{
System.Diagnostics.Process.Start("http://www.google.com");
}
Why don't these examples work as expected and how can I get a simple hyperlink to work as users are accustomed to them working in web browsers (left click, open browser, go to site)?
Addendum
I solved this by creating my own hyperlink without the Hyperlink element like this:
<TextBlock Text="More info at wikipedia"
TextDecorations="Underline"
MouseDown="TextBlock_MouseDown_Wikipedia"/>
private void TextBlock_MouseDown_Wikipedia(object sender, System.Windows.Input.MouseButtonEventArgs e)
{
System.Diagnostics.Process.Start("http://www.wikipedia.com");
}
Strange that hyperlink doesn't work this easily.
The MSDN states:
Hyperlink navigation can only occur, however, if either the direct or indirect parent of a Hyperlink is a navigation host, including NavigationWindow, Frame, or any browser that can host XBAPs (which includes Internet Explorer 7, Microsoft Internet Explorer 6, and Firefox 2.0+). For more information, see the Navigation Hosts topic in Navigation Overview.
Without seeing more of your code I don't know whether this applies in your case or not.
You were close. I believe all you needed to do different was specify the left-mouse click specifically-
MouseLeftButtonDown
This has a lot of good info-
https://stackoverflow.com/a/10667643/3692082

Categories