How to fix "materialDesign" is not defined in wpf/xaml - wpf

I recently added material design to my wpf project. Everything worked fine so far, untill I tried to add a dialog.
https://gyazo.com/13e65442cdd241108fa397bd1c5695e6
I googled the whole internet off but could not find a solution
<StackPanel
VerticalAlignment="Center">
<!--the request to open the dialog will bubble up to the top-most DialogHost, but we can used the attached property based event to handle the response -->
<Button
Command="{x:Static materialDesign:DialogHost.OpenDialogCommand}"
materialDesign:DialogHost.DialogClosingAttached="Sample2_DialogHost_OnDialogClosing"
Width="128">
<Button.CommandParameter>
<StackPanel
Margin="16">
<ProgressBar
Style="{DynamicResource MaterialDesignCircularProgressBar}"
HorizontalAlignment="Center"
Margin="16"
IsIndeterminate="True"
Value="0" />
<Button
Style="{StaticResource MaterialDesignFlatButton}"
IsCancel="True"
Command="{x:Static materialDesign:DialogHost.CloseDialogCommand}"
CommandParameter="Sample2Cancel"
HorizontalAlignment="Center">
CANCEL
</Button>
</StackPanel>
</Button.CommandParameter>
PASS VIEW
</Button>
<Button
Command="{x:Static materialDesign:DialogHost.OpenDialogCommand}"
Width="128"
Margin="0 32 0 0">
<Button.CommandParameter>
<!-- the simplest view model of all, a DateTime. the view can be found in the resources of MainWindow.xaml -->
<system:DateTime xmlns:system="clr-namespace:System;assembly=mscorlib">
1966-JUL-30
</system:DateTime>
</Button.CommandParameter>
PASS MODEL
</Button>
</StackPanel>
Getting the following error:
https://gyazo.com/c3038b28c90ebd81c94bea5a7bc9b671
I expected to have a dialog like in the demo of material design toolkit.
https://gyazo.com/435b4136a05678455386848548c9c6de

I had to add: xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
at the top of the xaml file

Related

WPF how to set stackpanel as resources and reuse it in TabControls

I am new to C# and WPF so please give me some ideas:
I have an WPF app used to display some stack panels,all stack panels default Visibility is set to collapsed and they will switch to visible according to the received data.
Now I want to make all these stack panels to resources so I can reuse it in some new added tab controls and stack panels.
<StackPanel x:Name="ColorOption" Visibility="Collapsed">
<TextBlock Text="Line Color" Style="{StaticResource ItemNameTextBlockStyle}"/>
<Button Style="{StaticResource ColorButtonStyle}" Click="Color_Click">
<Button.Content>
<Rectangle x:Name="LineColorRect" Style="{StaticResource ColorSelectionRectangleStyle}" />
</Button.Content>
</Button>
</StackPanel>
Above is one example of stack panels I am using. In the code behind the function "Color_Click" will change this "ColorOption" stack panel state and do something.
However after I try to put this stack panel into Windows.Resources
<Window.Resources>
<StackPanel x:Name="ColorOption" Visibility="Collapsed" x:Key="ColorOption">
<TextBlock Text="Line Color" Style="{StaticResource ItemNameTextBlockStyle}"/>
<Button Style="{StaticResource ColorButtonStyle}" Click="Color_Click">
<Button.Content>
<Rectangle x:Name="LineColorRect" Style="{StaticResource ColorSelectionRectangleStyle}" />
</Button.Content>
</Button>
</StackPanel>
</Window.Resources> (I also put the style files inside)
In the tab controls I did
<TabControl>
<TabItem Header="Tab 1" Content="{StaticResource ColorOption}"/>
</TabControl>
The visual studio shows error in the code behind says "ColorOption does not exist in the current context"
How can I fix this? Is any way to set the context? thank you
You can simply wrap the StackPanel in ContentControl and make it ControlTemplate.
<ControlTemplate x:Key="ColorOptionTemplate" TargetType="{x:Type ContentControl}">
<StackPanel x:Name="ColorOption" Visibility="Collapsed">
<TextBlock Text="Line Color" Style="{StaticResource ItemNameTextBlockStyle}"/>
<Button Style="{StaticResource ColorButtonStyle}" Click="Color_Click">
<Button.Content>
<Rectangle x:Name="LineColorRect" Style="{StaticResource ColorSelectionRectangleStyle}"/>
</Button.Content>
</Button>
</StackPanel>
</ControlTemplate>
However, you will need to change properties of controls inside the ContentControl and it would be cumbersome. So the StackPanel could be wrapped in UserControl instead.
<UserControl x:Class="WpfApp1.ColorOptionControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<StackPanel x:Name="ColorOption" Visibility="Collapsed">
<TextBlock Text="Line Color" Style="{StaticResource ItemNameTextBlockStyle}"/>
<Button Style="{StaticResource ColorButtonStyle}" Click="Color_Click">
<Button.Content>
<Rectangle x:Name="LineColorRect" Style="{StaticResource ColorSelectionRectangleStyle}"/>
</Button.Content>
</Button>
</StackPanel>
</UserControl>
This is a common way in WPF. The downside is that you will need to add dependency properties to UserControl and wire up them with dependency properties of internal controls so that you can set their values at the level of UserControl and bridge them with external controls and window. This could be complicated and cumbersome as well.
So I think ideally it would be better to find an existing control which has similar functionalities you want and create a custom control deriving from the existing one.

C# WPF MaterialDesign In Xaml Toolkit DialogHost. The background window behind the dialog box is not darkened

The background window is not darkened when DialogHost is called, meaning the dialog is not modal. The back window remains active. Although in the Github example works correctly. I don't know where I'm going.
XAML:
<materialDesign:DialogHost x:Name="DH_getLoadingList"
HorizontalAlignment="Center"
VerticalAlignment="Center"
CloseOnClickAway="True"
OverlayBackground="{DynamicResource PrimaryHueDarkBrush}" DialogTheme="Inherit" Grid.RowSpan="5" Grid.ColumnSpan="5">
<materialDesign:DialogHost.DialogContent>
<StackPanel Margin="16" Orientation="Vertical">
<Label Content="The row will be deleted." FontSize="16" />
<StackPanel Orientation="Horizontal">
<Button Content="OK" Style="{DynamicResource MaterialDesignFlatButton}" IsDefault="True" Margin="0,8,8,0" />
<Button Content="Cancel" Style="{DynamicResource MaterialDesignFlatButton}" Margin="0,8,8,0" />
</StackPanel>
</StackPanel>
</materialDesign:DialogHost.DialogContent>
</materialDesign:DialogHost>
C# code:
private void GettingFuelListCommand_Executed(object sender, ExecutedRoutedEventArgs e)
{
DH_getLoadingList.IsOpen = true;
}
UPDATED
I just had a misunderstanding the DialogHost structure. The correct way is
<Window>
<materialDesign:DialogHost>
<materialDesign:DialogHost.DialogContent>
<--! dialog content ... -->
</materialDesign:DialogHost.DialogContent>
<--! the correct location of the page content ... -->
</materialDesign:DialogHost>
<--! incorrect location of the page content ... -->
<Window/>
I know this is more than a year late. But when you put these properties:
HorizontalAlignment="Center"
VerticalAlignment="Center"
The overlay background will not appear, if you remove these, the problem will go away. The dialog will always be centered so don't need to worry about it's relative position to it's parent container.

Should I use a ContextMenu to show a couple of buttons?

I am developing a WPF application and I want the following functionality: If a user right clicks on a progress bar a small context menu should popup at the clicked position. This menu should just contain a couple of buttons which are lined up horizontally. Should I use the ContextMenu for this or are there better suitable WPF elements?
I tried a ContextMenu and this is how it looks like:
This is the XAML:
<ProgressBar x:Name="PgF" Height="10" Value="{Binding Path=FileCurrentMs}" Maximum="{Binding Path=FileLengthMs}">
<ProgressBar.ContextMenu>
<ContextMenu>
<StackPanel Orientation="Horizontal">
<Button Content="A"/>
<Button Content="B"/>
<Button Content="C"/>
</StackPanel>
</ContextMenu>
</ProgressBar.ContextMenu>
</ProgressBar>
In the ContextMenu I have the space to the left and to the right which I don’t want and I read in other posts that it is not simple just to remove this space. Any ideas?
Try like this :
<ProgressBar x:Name="PgF" Height="10" Value="{Binding Path=FileCurrentMs}" Maximum="{Binding Path=FileLengthMs}">
<ProgressBar.ContextMenu>
<ContextMenu>
<MenuItem>
<MenuItem.Template>
<ControlTemplate>
<StackPanel Orientation="Horizontal">
<Button Content="A" Margin="2"/>
<Button Content="B" Margin="2"/>
<Button Content="C" Margin="2"/>
</StackPanel>
</ControlTemplate>
</MenuItem.Template>
</MenuItem>
</ContextMenu>
</ProgressBar.ContextMenu>
</ProgressBar>
You need to put all buttons in a single menu item :) good luck

Building a Paging UserControl for ListView in Wpf

I have a ListView in a WPF Window. This ListView is binded to a strongly typed list.
I have 10 Windows like this. each having a Listview binded to a strongly typed list.
I have a StackPanel with 4 buttons and a Label Below the ListView that serves as a Pager for the ListView. Currently, I am handling the Buttons events in the Code behind for the window.
Can anyone guide me on making this part of the pager a UserControl?
The part i am confused in is.. How do I handle the List<type> in the Code behind?
1) How do i Access the Usercontrol properties in the Codebehind for Window.
2) Where do i do the Actual Filtering for the list and Set the itemsource to the listview.
<StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
<Button Name="btnFirst" Content="<<" Margin="2,2,15,2" Width="20" Height="20" Tag="First" ToolTip="First" Click="btnNav_Click"/>
<Button Name="btnPrev" Content="<" Margin="2,2,15,2" Width="20" Height="20" Tag="Prev" ToolTip="Previous" Click="btnNav_Click"/>
<Label Name="lblPage" Margin="2,2,15,2" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<Button Name="btnNext" Content=">" Margin="2,2,15,2" Width="20" Height="20" Tag="Next" ToolTip="Next" Click="btnNav_Click"/>
<Button Name="btnLast" Content=">>" Margin="2,2,0,2" Width="20" Height="20" Tag="Last" ToolTip="Last" Click="btnNav_Click"/>
</StackPanel>
Thnkx Guys!.. But that is not what i was looking for !..
I have the paging imlementation with me .. but i want to make it generic and make a usercontrol that i could reuse in every wpf window.
Here's how i did it.
<StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
<Button Name="btnFirst" Content="<<" Margin="2,2,10,2" Width="20" Height="20" Tag="First" ToolTip="First" Click="btnNav_Click"/>
<Button Name="btnPrev" Content="<" Margin="2,2,10,2" Width="20" Height="20" Tag="Prev" ToolTip="Previous" Click="btnNav_Click"/>
<Label HorizontalAlignment="Center" VerticalAlignment="Center" Content="Page :" Margin="2,2,0,2"/>
<ComboBox Name="cmbxPageNo" HorizontalAlignment="Left" Margin="1,2,4,0" HorizontalContentAlignment="Center" VerticalContentAlignment="Bottom" VerticalAlignment="Center" Width="35" Style="{StaticResource PagerCmbx}" SelectionChanged="cmbxPageNo_SelectionChanged" Height="18" ItemsSource="{Binding}"/>
<Label Name="lblTotPage" HorizontalAlignment="Left" VerticalAlignment="Center" FontSize="14" Content="/ 5"/>
<Button Name="btnNext" Content=">" Margin="15,2,10,2" Width="20" Height="20" Tag="Next" ToolTip="Next" Click="btnNav_Click"/>
<Button Name="btnLast" Content=">>" Margin="2,2,0,2" Width="20" Height="20" Tag="Last" ToolTip="Last" Click="btnNav_Click"/>
</StackPanel>
This is the ui for the control which would look like
now for the class..
http://pastebin.com/jGywtEgG
At the Xaml for the window . where u show the listview with the binded strongly typed list.
Place the Usercontrol below the listview.
Set the itemsource for the listview={Binding ElementName = "nameof the usercontrol",Path = CurrentView}
CurrentView is the Property exposed in the class with Inotifypropertychanged implemented.
That's pretty much it.
Here is a good video tutorial by Beth Massi on WindowsClient.net. It covers paging along with many concepts useful for creating a Data-Centric application in WPF.
How Do I: Create a Simple Data Entry Form in WPF

get the index of a button in a x:Array of a ListBox (wpf)

Hello
Is there a way to get the index of a button in an x:Array of a ListBox.
I know that I can get the button info once clicked (via the sender argument) but I can't get its index.
ListBox.CurrentItem and ListBox.SelectedItem don't work
no luck with
int t = this.lstButtons.SelectedIndex;
t=this.lstButtons.Items.CurrentPosition;
t=lstButtons.ItemContainerGenerator.IndexFromContainer((Button)sender);
<x:Array Type="Button" >
<Button Content="Button1" VerticalAlignment="Top" Width="149" Click="Button_Click" />
<Button Content="Button2" VerticalAlignment="Top" Width="149" Click="Button_Click"/>
<Button Content="Button3" BorderThickness="4" VerticalAlignment="Top" Width="149" Click="Button_Click"/>
</x:Array>
</ListBox.ItemsSource>
Well I would re-think the problem because it sounds like a pretty brittle and roundabout way to take conditional action based on the item. But what you could probably do is:
int index = Array.IndexOf((Button[])listBox.ItemsSource, clickedButton);

Resources