I am using the MaterialDesignThemes nuget package along with the Mahapps.Metro package
I have this DialogHost
<material:DialogHost Name="PopupAddCustom" HorizontalAlignment="Center" VerticalAlignment="Center" IsOpen="False" >
<material:DialogHost.DialogContent>
<StackPanel Margin="16" Orientation="Vertical">
<Label Content="Add custom date" FontSize="16" />
<DatePicker />
<StackPanel Orientation="Horizontal">
<Button Content="ACCEPT" Style="{DynamicResource MaterialDesignFlatButton}" IsDefault="True" Margin="0,8,8,0" Command="material:DialogHost.CloseDialogCommand" CommandParameter="True" />
<Button Content="CANCEL" Style="{DynamicResource MaterialDesignFlatButton}" IsCancel="True" Margin="0,8,8,0" Command="material:DialogHost.CloseDialogCommand" CommandParameter="False" />
</StackPanel>
</StackPanel>
</material:DialogHost.DialogContent>
</material:DialogHost>
That is being openend by this button
<Button MinWidth="120" Margin="10" Style="{StaticResource MaterialDesignRaisedAccentButton}" ToolTip="Add in a new custom date." Command="{x:Static material:DialogHost.OpenDialogCommand}" CommandTarget="{Binding ElementName=PopupAddCustom}" >
<StackPanel Orientation="Horizontal">
<Rectangle Width="20" Height="20" Fill="{Binding RelativeSource={RelativeSource AncestorType=Button}, Path=Foreground}">
<Rectangle.OpacityMask>
<VisualBrush Stretch="Fill" Visual="{StaticResource fa_plus}" />
</Rectangle.OpacityMask>
</Rectangle>
<TextBlock Margin="10,0,0,0" VerticalAlignment="Center" Text="Custom" />
</StackPanel>
</Button>
However when this dialog gets opened the ACCEPT and CANCEL buttons are disabled. So to check if anything was wrong I manually opened this dialog from the my MainWindow constructor like this
this.Loaded += delegate(object sender, RoutedEventArgs args)
{
this.PopupAddCustom.IsOpen = true;
};
When I open the dialog like this the button are in working order, am I missing something obvious here?
The problem was resolved by setting a command target for the buttons like this
CommandTarget="{Binding ElementName=PopupAddCustom}"
To save someone elses time: I had dialog content specified as command parameter and specifying CommandTarget did not help me.
What helps in my case, is to put CommandParameter before Command.
You can achieve that by passing content as resource.
Example:
Before:
<Button
...
Command="{x:Static material:DialogHost.OpenDialogCommand}"
>
<Button.CommandParameter>
<Grid>
** Dialog content **
</Grid>
</Button.CommandParameter>
** Button content **
</Button>
After:
<UserControl.Resources>
<Grid x:Key="MyDialogContent">
** Dialog content **
</Grid>
</UserControl.Resources>
<Button
...
CommandParameter="{StaticResource MyDialogContent}"
Command="{x:Static material:DialogHost.OpenDialogCommand}"
>
** Button content **
</Button>
And dialoghost buttons were not disabled anymore.
Related
I have a WPF application (C#) thats using a Material Designs PopUpBox for its menu navigation, as per the following:-
<materialDesign:PopupBox Margin="10,0,0,0" PlacementMode="BottomAndAlignLeftEdges" StaysOpen="false" IsEnabled="{Binding IsSystemControlsEnabled}" Style="{DynamicResource template_NavigationMenu}" >
<materialDesign:PopupBox.ToggleContent>
<materialDesign:PackIcon Foreground="White" Height="25" Kind="Menu" Width="25"/>
</materialDesign:PopupBox.ToggleContent>
<StackPanel Width="150" >
<Button Command="{Binding ScreenCommand}" CommandParameter="Dashboard" Content="Dashboard" FontSize="12" FontWeight="Medium" Height="20" Name="MenuDashboard" VerticalAlignment="Top" VerticalContentAlignment="Top" />
<Separator/>
<Button Command="{Binding ScreenCommand}" CommandParameter="Encrypt" Content="Encrypt" FontSize="12" FontWeight="Medium" Height="20" Name="MenuEncrypt" VerticalAlignment="Top" VerticalContentAlignment="Top" />
<Separator />
<Button Command="{Binding ScreenCommand}" CommandParameter="Decrypt" Content="Decrypt" FontSize="12" FontWeight="Medium" Height="20" Name="MenuDecrypt" VerticalAlignment="Top" VerticalContentAlignment="Top" />
<Separator />
</StackPanel>
</materialDesign:PopupBox>
Is there a way to cascade this menu and add an extra layer? So for example, if I was to select or hover over the button for Encryption, it would they give me a new popupbox, just to the right, with some new options relating to encryption?
I'm trying to find something like this https://m2.material.io/components/menus (first image) but can't find anything relating to C# / XAML, so looking for some inspiration from the experts...
Any help is greatly appreciated.
Thank you
I am using Material Design for WPF. I am trying to use Dialogs.
Here is my dialog content:
<materialDesign:DialogHost.DialogContent>
<Label></Label>
</materialDesign:DialogHost.DialogContent>
I have also popup box with buttons what generate dialogs. Popup dialog is inside of DialogHost as below:
<materialDesign:DialogHost HorizontalAlignment="Center" VerticalAlignment="Center" Grid.Row="0" Grid.Column="8">
<materialDesign:PopupBox Style="{StaticResource MaterialDesignMultiFloatingActionAccentPopupBox}" PlacementMode="BottomAndAlignCentres">
<materialDesign:PopupBox.ToggleCheckedContent>
<materialDesign:PackIcon Kind="Close" Width="24">
</materialDesign:PopupBox.ToggleCheckedContent>
<StackPanel>
<Button ToolTip="Add Audio" Background="#449AB8" BorderBrush="#449AB8" Command="{Binding AddAudioCommand}">
<materialDesign:PackIcon Foreground="White" Kind="Microphone" />
</Button> <!-- This Command is working-->
<Button ToolTip="Add Picture" Background="#449AB8" BorderBrush="#449AB8" Command="{x:Static materialDesign:DialogHost.OpenDialogCommand}">
<materialDesign:PackIcon Foreground="White" Kind="Camera" />
<Button.CommandParameter>
<StackPanel Margin="16">
<TextBlock HorizontalAlignment="Center" FontSize="15">
Add Image
</TextBlock>
<Button Style="{StaticResource MaterialDesignFlatButton}" IsDefault="True" Margin="0 10 10 0" Command="{Binding Path=AddPictureCommand}">
Attach from disc
</Button>
<Button Style="{StaticResource MaterialDesignFlatButton}" IsCancel="True" Margin="0 8 8 0">
Take a photo
</Button>
<Button Style="{StaticResource MaterialDesignFlatButton}" IsCancel="True" Margin="0 8 8 0" Command="materialDesign:DialogHost.CloseDialogCommand">
<Button.CommandParameter>
<system:Boolean>False</system:Boolean>
</Button.CommandParameter>
Discard
</Button>
</StackPanel>
</Button.CommandParameter>
</Button>
</stackpanel>
...
As I understand I am sending layout of Dialog to DialogContent. However first button's command is working (Add Audio).
Second button 'Add Picture' sends StackPanel to DialogContent. Dialog is working, it does appear but my Command doesn't work. It's weird because Command to close is working.
The problem is it doesn't get into Command Execute method.
I think that it isn't weird that CloseDialogCommand is executing - it indicates to your Dialog.
And you are trying to execute AddPictureCommand at context of this Dialog.
Try to find out how to pass your parent as a DataContext or maybe (probably better idea) use dedicated MVVM solution to bind content od dialog (your StackPanel) with some code.
There are few solutions of dealing with dialogs on wiki of MaterialDesign project
I am new to WPF,and have written a simple hello world type application in order to get started. The code I have so far is shown below:
WPF XAXML
<Window x:Name="wndMain" x:Class="MyApp.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:ews="clr-namespace:ExtraWindowStyles"
ResizeMode="NoResize"
ews:ExtraWindowStyles.CanMinimize="false"
ews:ExtraWindowStyles.CanMaximize="false"
Title="Hello World" Height="501.492" Width="842.285">
<Grid>
<GroupBox Header="Input Parameters" HorizontalAlignment="Left" Height="173" Margin="10,25,0,0" VerticalAlignment="Top" Width="801" >
<StackPanel Orientation="Horizontal" Margin="0,0,96,0">
<StackPanel Margin="10">
<Label FontWeight="Bold">First Group</Label>
<RadioButton x:Name="opt11">Option 1 - 1</RadioButton>
<RadioButton x:Name="opt12">Option 1 - 2</RadioButton>
<RadioButton x:Name="opt13">Option 1 - 3</RadioButton>
</StackPanel>
<StackPanel Margin="10">
<Label FontWeight="Bold" Content="Second Group"/>
<RadioButton x:Name="opt21" Content="Option 2 - 1"/>
<RadioButton x:Name="opt22" Content="Option 2 - 2"/>
<RadioButton x:Name="opt23" Content="Option 2 - 3"/>
</StackPanel>
</StackPanel>
</GroupBox>
<Separator HorizontalAlignment="Left" Height="80" Margin="17,203,0,0" VerticalAlignment="Top" Width="794"/>
<Button x:Name="btnSubmit" Content="Submit" HorizontalAlignment="Left" Height="34" Margin="632,203,0,0" VerticalAlignment="Top" Width="179" Click="btnExplore_Click" />
<Label Content="Results:" HorizontalAlignment="Left" Height="28" Margin="10,242,0,0" VerticalAlignment="Top" Width="161"/>
<Label Content="My App" HorizontalAlignment="Left" Height="23" Margin="696,439,0,0" VerticalAlignment="Top" Width="130" FontSize="9"/>
<TextBlock>
<Hyperlink NavigateUri="http://www.google.com" RequestNavigate="Hyperlink_RequestNavigate">
Click Here
</Hyperlink>
</TextBlock>
<Rectangle Fill="#FFF4F4F5" HorizontalAlignment="Left" Height="162" Margin="17,270,0,0" Stroke="Black" VerticalAlignment="Top" Width="794"/>
<Label x:Name="lblResult" Content="" HorizontalAlignment="Left" Height="157" Margin="17,275,0,0" VerticalAlignment="Top" Width="794"/>
</Grid>
</Window>
Code Behind..
private void Hyperlink_RequestNavigate(object sender, RequestNavigateEventArgs e)
{
Process.Start(new ProcessStartInfo(e.Uri.AbsoluteUri));
e.Handled = true;
}
If I comment out the Hyperlink control XAML (and its related backend code), I am able to select options, click the Submit button etc.
However, if I uncomment the Hyperlink control (and its associated backend code), The only thing that remains clickable, is the Url on the form - what's going on?
Just position your TextBlock and it won't take all space in the window and cover everything :
<TextBlock Width="100" Height="30">
<Hyperlink Background="Red" NavigateUri="http://www.google.com" >
Click Here
</Hyperlink>
</TextBlock>
Because the TextBlock is after submit button in XAML it is over.
You could also set Margin to position the TextBlock
Layout knowledge
Elements in a grid Stretch Horizontally and Vertically if no alignment is set.
Useful tip : If you click on the TextBlock tag, you'll see the extent of the TextBlock in the design view.
Often useful
how i say in title, i have a datatemplate for a Telerik RadTileView, in the large content i have a toolbar with a play button, the idea is that when a user click this button, the images in the tile view change automatically, i already do that but i need change the image inside the play button with a stop icon, this is my data template:
<DataTemplate x:Key="contentTemplate">
<telerik:RadFluidContentControl>
<telerik:RadFluidContentControl.Content>
<Border>
<Image Source="{Binding Frame}" />
</Border>
</telerik:RadFluidContentControl.Content>
<telerik:RadFluidContentControl.LargeContent>
<Grid>
<Grid>
<Image Source="{Binding Frame}" />
</Grid>
<Border BorderBrush="Black" BorderThickness="1" Background="#80000000" Height="80" VerticalAlignment="Bottom">
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
<Button Style="{StaticResource BotonGrande}" Name="BotonImagenAtras" Click="BotonImagenAtras_Click">
<Image Style="{StaticResource ImagenGrande}" Source="/VisorSeproban;component/Imagenes/izquierda.png" />
</Button>
<Button Style="{StaticResource BotonGrande}" Name="BotonImagenesPlay" Click="BotonImagenesPlay_Click">
<Image Style="{StaticResource ImagenGrande}" Source="/VisorSeproban;component/Imagenes/play_on.png" />
</Button>
<Button Style="{StaticResource BotonGrande}" Name="BotonCaputarImagen" Click="BotonCaputarImagen_Click">
<Image Style="{StaticResource ImagenGrande}" Source="/VisorSeproban;component/Imagenes/captura_img_on.png" />
</Button>
<Button Style="{StaticResource BotonGrande}" Name="BotonImagenAdelante" Click="BotonImagenAdelante_Click">
<Image Style="{StaticResource ImagenGrande}" Source="/VisorSeproban;component/Imagenes/derecha.png" />
</Button>
</StackPanel>
</Border>
</Grid>
</telerik:RadFluidContentControl.LargeContent>
</telerik:RadFluidContentControl>
</DataTemplate>
Thanks for your help!
Regards
try attaching an event an change the image when the event get fire. you can try with Javascript if you are running your app in a browser.
I have one list box. Inside that i have buttons for each row. When i click the button the page will navigate to another page. If i click the list box items the page will navigate to another page.
Now i can not write the events for button inside the list box.
<Grid x:Name="ListBoxEventsUIContainer" Grid.Row="1" Margin="2,0,2,0">
<ListBox Height="444" ItemsSource="{Binding StudentDetails,Mode=TwoWay}" HorizontalAlignment="Left" Margin="2,34,0,0" Name="listBox1" VerticalAlignment="Top" Width="476" BorderBrush="#00410D0D">
<ListBox.ItemTemplate>
<DataTemplate>
<Border BorderBrush="Gray" Padding="5" BorderThickness="1">
<StackPanel Orientation="Horizontal">
<Border BorderBrush="Wheat" BorderThickness="1">
<Image Name="ListPersonImage" Source="{Binding PersonImage}" Height="100" Width="100" Stretch="Uniform" Margin="10,0,0,0"/>
</Border>
<TextBlock Text="{Binding FirstName}" Name="firstName" Width="200" Foreground="White" Margin="10,10,0,0" FontWeight="SemiBold" FontSize="22" />
<Button Height="80" Width="80" Command="{Binding addPerson}">
<Button.Background>
<ImageBrush ImageSource="/NewExample;component/Images/icon_increase.png" Stretch="Fill" />
</Button.Background>
</Button>
</StackPanel>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
i want to write the event for :-
<Button Height="80" Width="80" Command="{Binding addPerson}">
<Button.Background>
<ImageBrush ImageSource="/NewExample;component/Images/icon_increase.png" Stretch="Fill" />
</Button.Background>
</Button>
In View Model. Normally i will write the button event like:-
ReactiveAsyncCommand addPerson = new ReactiveAsyncCommand();
public ListBoxEventsViewModel()
{
var getOrgDetails = new ReactiveAsyncCommand();
getOrgDetails.Subscribe(x =>
{
StudentDetails = new ObservableCollection<ListBoxEventsModel>();
StudentDetails = ListBoxEventsModel.extract(myData.ToString());
});
getOrgDetails.Execute(true);
addPerson = new ReactiveAsyncCommand();
addPerson.Subscribe(x=>{
MessageBox.Show("Selected..");
});
}
But i can addPerson button is not working. Please let me know how to write the event?
Thanks in advance..
Set the DataContext to the button.
Xaml:
<Button DataContext="{Binding DataContext, ElementName=listBox1}"
Height="80"
Width="80"
Command="{Binding addPerson}">
<Button.Background>
<ImageBrush ImageSource="/NewExample;component/Images/icon_increase.png"
Stretch="Fill" />
</Button.Background>
You can do any of the following..
Directly write the "click" event in the item template and then get the corresponding data item which called it using as follows
in xaml..
<Button Height="80" Width="80" Command="{Binding addPerson}" click="addPersonClick">
<Button.Background>
<ImageBrush ImageSource="/NewExample;component/Images/icon_increase.png" Stretch="Fill" />
</Button.Background>
</Button>
In the backend..
private void addPersonClick(object sender, RoutedEventArgs e)
{
StudentsDetails object=(sender as Button).DataContext as StudentsDetails;
//You can use this object for any of your operations
}
2 . Or you can totally use a new feature called ContextMenu to implement one of the navigation you want.