I have a radiobutton.xaml file that has 4 radio buttons and a button
I showed radio button on the mainwindow by this code
<ContentControl Content="{StaticResource RB}" Height="326" x:Name="select" />
Now I need to implement binding for the radio button
I can't bind the radio buttons and the button to a view model. need to open new windows on behalf of the selected radio button on click of the button.
having difficulty in making V-M for radio button. don't know exactly where to put the binding code ...
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:src="clr-namespace:DiagramDesigner">
<GroupBox x:Key="RB" Header="Select The Architecture Modeling Style" Height="400" >
<StackPanel>
<TextBlock Text="Custom Style Architecture Modeling:" FontSize="20"
Margin="30 30 40 10" HorizontalAlignment="Center" />
<RadioButton Content="Custome Architecture Modeling" Margin="50 0 10 10"
GroupName="Standard" />
<TextBlock Text="Standard Style Architecture Modeling:" FontSize="20"
Margin="30 0 40 10" HorizontalAlignment="Center" />
<RadioButton Content="3-Tier Architecture Modeling" Margin="50 0 10 0"
GroupName="Standard" />
<RadioButton Content="Client-Server Architecture Modeling"
Margin="50 0 10 0" GroupName="Standard" />
<RadioButton Content="Pipeline and Filter Architecture Modeling"
Margin="50 0 10 0" GroupName="Standard" />
<Button Margin="100 20 100 0" Width="200" HorizontalContentAlignment="Center">
<Button.Content>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="4*"/>
<RowDefinition Height="1*"/>
</Grid.RowDefinitions>
<TextBlock Grid.Row="1" Text="Let's Go Draw It..." VerticalAlignment="Bottom" HorizontalAlignment="Center"/>
</Grid>
</Button.Content>
</Button>
</StackPanel>
</GroupBox>
</ResourceDictionary>
need to bind it as MVVM
I'd recommend you to use the ListBox method instead of the one you mentioned. You may find it here:
http://www.codeproject.com/Tips/807025/WPF-MVVM-Binding-for-Multiple-Radio-Buttons
If you'd like to keep the "abstract" groups (custom and standard style architecture modeling), then one of the solution that comes to my mind now is to implement a TextBox in the ControlTemplate and bind it to a property on the view model.
<ListBox ItemsSource="{Binding RadioCollection}" SelectedItem="{Binding SelectedRadio}">
<ListBox.ItemContainerStyle>
<Style TargetType="{x:Type ListBoxItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListBoxItem}">
<TextBlock Text="{Binding AbstractGroupHeader}" />
<RadioButton
Content="{Binding Header}" ToolTip="{Binding ToolTip}"
IsChecked="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsSelected}"/>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="Margin" Value="5"/>
</Style>
</ListBox.ItemContainerStyle>
</ListBox>
The view model basically is responsible for the view's state (e.g. an animation on the view isn't definied in the view model, but the view model may release, as in start it). VM is a class that you define and it must implement INotifyPropertyChanged interface found in namespace System.ComponentModel in case you want the view to be notified when you change property's value in code. Keep in mind, that the property must have a public access modifier, in order for the binding to work. If you want to follow this method, then read the article located under the link I gave. However, if you want a simpler solution, which will work with your code, then you have to bind IsChecked dependency property of each of the radio buttons to appropriate properties on the view model, like this:
<RadioButton Content="Pipeline and Filter Architecture Modeling"
Margin="50 0 10 0" GroupName="Standard" IsChecked="{Binding IsPipelinedModeling}"/>
And the VM in this case would look like this:
public class SettingsViewModel : INotifyPropertyChanged
{
bool _isPipelinedModeling;
public bool IsPipelinedModeling
{
get { return _isPipelinedModeling; }
set
{
if (_isPipelinedModeling == value)
return;
_isPipelinedModeling = value;
RaisePropertyChanged();
}
}
#region INotifyPropertyChanged implementation
public void RaisePropertyChanged([CallerMemberName]string propertyName = "")
{
if (PropertyChanged != null)
PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}
public event PropertyChangedEventHandler PropertyChanged;
#endregion INotifyPropertyChanged implementation
}
To bind the view model to the view you can use either "view first" or "view model first" approach. I'm using view first. In the constructor of the window, user control or whatever you're using, add the following code:
this.Loaded += (s, e) =>
{
this.DataContext = new SettingsViewModel();
};
The code creates a new view model object and sets it as the window's DataContext.
Binding to a button is a little bit different though, because you have to declare a command. It is a class of your own, implementing ICommand interface:
ICommand _drawModelingArchitectureCommand;
public ICommand DrawModelingArchitectureCommand
{
get
{
return _drawModelingArchitectureCommand ?? (_drawModelingArchitectureCommand = new DrawTheModelingArchitectureCommand());
}
}
public class DrawTheModelingArchitectureCommand : ICommand
{
public bool CanExecute(object parameter)
{
// the code that decides whether the button will be enabled or not
return true;
}
public event EventHandler CanExecuteChanged;
public void Execute(object parameter)
{
// the code that is executed when the button is pressed
}
}
And finally the XAML for the button:
<Button Grid.Row="1" Content="Let's Go Draw It..." VerticalAlignment="Bottom" HorizontalAlignment="Center" Command="{Binding DrawTheModelingArchitecture}"/>
Related
i have made an picross application in c# als my secund c# application.
i am trying to keep it mvvm. but have a little problem with this.
i have an array of rectangles en when someone clicks 1 of theses rectangles the status of this one needs to be changed(color change).
i have managed to do this in a non mvvm way but really want to make is mvvm.
so the code.
first the xaml code.
<Window x:Class="View.CreatePuzzle"
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:View"
xmlns:controls="clr-namespace:View.Controls"
mc:Ignorable="d"
Title="CreatePuzzle" Height="450" Width="800">
<Window.Resources>
<VisualBrush x:Key="myBrush">
<VisualBrush.Visual>
<Grid>
<Rectangle Fill="Red"/>
<Image Source="Images/backgroundmain.jpg"/>
</Grid>
</VisualBrush.Visual>
</VisualBrush>
</Window.Resources>
<Grid Background="{StaticResource myBrush}" RenderTransformOrigin="0.508,0.819" Height="450" Margin="10,0,10,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200"/>
<ColumnDefinition Width="600"/>
</Grid.ColumnDefinitions>
<StackPanel>
<TextBlock Grid.Column="0" Text="your name" />
<TextBox Grid.Column="0" Text="{Binding Author}" />
<TextBlock Grid.Column="0" Text="width" />
<controls:numberinput x:Name="widthfield" Grid.Column="1" Value="{Binding puzzlewidth}">
</controls:numberinput>
<TextBlock Grid.Column="0" Text="height" />
<controls:numberinput x:Name="heightfield" Grid.Column="0" Value="{Binding puzzleheight}">
</controls:numberinput>
<Button Grid.Column="0" Height="25" Content="generate puzzle"
Command="{Binding Path=generatefield}"/>
</StackPanel>
<controls:PiCrossControl HorizontalAlignment="Center" VerticalAlignment="Center" Grid.Column="1" x:Name="picrossControl" ColumnConstraints="{Binding ColumnConstraints}" RowConstraints="{Binding RowRonstraints }" Grid="{Binding Grid}" >
<controls:PiCrossControl.SquareTemplate>
<DataTemplate >
<Rectangle Width="32" Height="32" Stroke="Black" MouseRightButtonDown="Rectangle_MouseRightButtonDown" MouseWheel="Rectangle_MouseWheel">
<Rectangle.InputBindings>
<MouseBinding Gesture="LeftClick" Command="{Binding Path=Rectangle_MouseLeftButtonDown}"/>
</Rectangle.InputBindings>
<Rectangle.Fill>
<Binding Path="Contents.Value" UpdateSourceTrigger="PropertyChanged">
<Binding.Converter>
<local:SquareConverter Empty="White" Filled="Black" Unknown="green" />
</Binding.Converter>
</Binding>
</Rectangle.Fill>
</Rectangle>
</DataTemplate>
</controls:PiCrossControl.SquareTemplate>
</controls:PiCrossControl>
<Button Grid.ColumnSpan="2" Height="50" Content="create puzzle"
Command="{Binding Path=createpuzzle}" Margin="0,340,0,0"/>
</Grid>
here is one of the methodes is want to take out of the xaml.cs
private void Rectangle_MouseRightButtonDown(object sender, MouseButtonEventArgs e)
{
Rectangle rectangle = (Rectangle)sender;
IPlayablePuzzleSquare square = (IPlayablePuzzleSquare)rectangle.DataContext;
square.Contents.Value = Square.EMPTY;
}
and the view model methode i wanna use to replace it with:
public void Rectangle_MouseLeftButtonDown(object sender )
{
Debug.WriteLine("leftmousevent in vm");
}
so when i run this code i get te following error for every rectangle :
System.Windows.Data Error: 40 : BindingExpression path error: 'Rectangle_MouseLeftButtonDown' property not found on 'object' ''PlayablePuzzleSquare' (HashCode=36468595)'. BindingExpression:Path=Rectangle_MouseLeftButtonDown; DataItem='PlayablePuzzleSquare' (HashCode=36468595); target element is 'MouseBinding' (HashCode=10961125); target property is 'Command' (type 'ICommand')
i hope someone can help me.
note i am pretty new to c# but have more java experience.
thanks in advance
jef uytterhoeven
As you said; Rectangle_MouseLeftButtonDown is an event handler.
Without seeing your view-model it's hard to fix this, but, you should use the same structure as you do in the Command binding for your button:
Command="{Binding Path=generatefield}"
So, look for generatefield in your view model and duplicate and adjust it to replace the event handler.
Since you do not wish code behind, you have to remove your Mouse left button click event handler from xaml.cs.
Instead you can make use of System.Windows.Interactivity.dll .
Add this reference to your project first. Then add following code in xaml . (Example)
<i:Interaction.Triggers>
<i:EventTrigger EventName="MouseLeftButtonDown" >
<i:InvokeCommandAction Command="{Binding MouseLeftButtonDownClick}" >
</i:InvokeCommandAction>
</i:EventTrigger>
</i:Interaction.Triggers>
</Rectangle>
As you can see in the example, my event is bound to command,which is in the View model . If you are not familiarize with EventToCommand binding , you can learn more from following link
WPF Binding UI events to commands in ViewModel
After this, you have to implement ICommand in your viewmodel . (Example)
public class ViewModel : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
public ICommand MouseLeftButtonDownClick { get; }
public ViewModel()
{
MouseLeftButtonDownClick = new RelayCommand(OnMouseLeftButtonClick);
}
private void OnMouseLeftButtonClick(object obj)
{
//Your logic on left button click
}
public void OnPropertyChanged(string PropName)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(PropName));
}
}
I have used RelayCommand class in my viewmodel, which is nothing but ICommand implementation . If you are not familiarize with ICommand , you can learn more from following link
ICommand MVVM implementation
I have a UserControl within a frame on it's parent window. In the usercontrol, I have a textbox that needs to be edited when a button on the parent window is toggled.
UserControl.xaml
<UserControl.Resources>
<ResourceDictionary>
<Style x:Key="TextBoxEdit" TargetType="TextBox">
<Setter Property="IsReadOnly" Value="True" />
<Style.Triggers>
<DataTrigger Binding="{Binding CanEdit}" Value="True">
<Setter Property="IsReadOnly" Value="False" />
</DataTrigger>
</Style.Triggers>
</Style>
</ResourceDictionary>
</UserControl.Resources>
<Grid>
<TextBox
x:Name="EditTextBox"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Style="{StaticResource TextBoxEdit}"
Text="Edit me" />
</Grid>
MainWindow.xaml
<Controls:MetroWindow.DataContext>
<local:ViewModel/>
</Controls:MetroWindow.DataContext>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition />
</Grid.RowDefinitions>
<ToggleButton x:Name="EditButton" HorizontalAlignment="Center" VerticalAlignment="Top" IsChecked="{Binding CanEdit}">Edit</ToggleButton>
<Frame Grid.Row="1" Source="Home.xaml" />
</Grid>
ViewModel
public class ViewModel : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
private bool canEdit;
public bool CanEdit
{
get { return canEdit; }
set
{
canEdit = value;
OnPropertyChanged("CanEdit");
}
}
private void OnPropertyChanged(string propertyName)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
}
How do I get the data trigger to work properly? Is the best way to create another view model for the usercontrol and then communicate the values between the 2 viewmodels? If so, how would I do that?
Is the best way to create another view model for the usercontrol and then communicate the values between the 2 viewmodels?
The most common way would be for the UserControl to simply inherit the DataContext of the parent window so they both can bind to the same property.
This doesn't work out-of-the-box when you are using a Frame though.
You could either replace the Frame with a ContentControl:
<ToggleButton x:Name="EditButton" IsChecked="{Binding CanEdit}">Edit</ToggleButton>
<ContentControl>
<local:Home />
</ContentControl>
Or you could handle the DataContextChanged event for the Frame and set the DataContext of its Content explicitly as suggested by #Joe White here: page.DataContext not inherited from parent Frame?
I'm a bit beginner in WPF, so I ask this..
Let's say I have a window, and inside the window I want to have something like container, could be just border or maybe panel (in winform terms). The content of container is binded to the selected option (e.g:button). So, for instance, when user selects OPTION 1, the container shows chart; when user selects OPTION 2, the container shows listview filled with data; when user selects OPTION 3, the container shows another things, and so on.
What is the best/nicest (or easiest maybe) approach to do this? I'm thinking about using user control for the content of the container, but don't know if this is nice solution neither the performance for using user control to show little bit complex things and maybe some calculations. Any other idea guys?
To elaborate on #Sheridan's answer, here is a simple TabControl XAML that does what you need:
<TabControl TabStripPlacement="Left">
<TabItem Header="Option 1">
<Grid Background="DarkGray">
<TextBlock Foreground="AliceBlue" VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="20" Text="View 1"/>
</Grid>
</TabItem>
<TabItem Header="Option 2">
<Grid Background="DarkBlue">
<TextBlock Foreground="AliceBlue" VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="20" Text="View 2"/>
</Grid>
</TabItem>
<TabItem Header="Option 3">
<Grid Background="DarkSlateBlue">
<TextBlock Foreground="AliceBlue" VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="20" Text="View 3"/>
</Grid>
</TabItem>
</TabControl>
Result:
You can customize it a little bit by adding this simple Style To your Window.Resources:
<Window.Resources>
<Style TargetType="TabItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TabItem">
<RadioButton Content="{TemplateBinding Header}" Margin="2"
IsChecked="{Binding IsSelected, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
Which then results in:
The "WPF Mentality" makes you think the UI controls in terms of their functionality, not their appearance, this is a TabControl =)
I solved this with a ContentControl
MainWindow:
(Define the views you wish to visualize as resources)
<Window.Resources>
<DataTemplate DataType="{x:Type viewModels:SystemPCViewModel}">
<controls:SystemPCControl/>
</DataTemplate>
<DataTemplate DataType="{x:Type viewModels:ChipPCViewModel}">
<controls:ChipPCControl/>
</DataTemplate>
</ResourceDictionary>
</Window.Resources>
<Grid>
<ContentControl Content="{Binding CurrentView}"/>
</Grid>
ViewModel: (can't get much simpler)
public ViewModelBase CurrentView
{
get { return currentView; }
set { Set(() => CurrentView, ref currentView, value); }
}
And there you go, you can change your views by setting the view model for the controls you defined in your MainWindow
private void OnCommandExecuted()
{
CurrentView = someViewModel;
}
private void OnAnotherCommandExecuted()
{
CurrentView = anotherViewModel;
}
HTH!
What you are describing sounds pretty close to a standard TabControl, but with a ControlTemplate that puts the tabs on the left side instead of above the content panel. Using this method would mean having a UserControl in each TabItem, eg. multiple controls. You can find out more about the TabControl from the TabControl Class page at MSDN.
I'm trying to implement a toggle button that permits the user to select between linear or logarithmic axis.
For that I have in my View this ToggleButton:
<ToggleButton Width="40" Height="20" Margin="2" Grid.Row="1" Content="LogX" VerticalAlignment="Center" IsChecked="{Binding LogXChecked, Mode=TwoWay}"/>
In my ViewModel:
private bool _isLogXChecked;
public bool IsLogXChecked
{
get
{
return _isLogXChecked;
}
set
{
_isLogXChecked = value;
RaisePropertyChanged("IsLogXChecked");
LogX();
}
}
But with this implementation I can't get it to work, the IsLogXChecked property does not update when the user presses the ToggleButton, and my method LogX() does not fire.
Where might be the problem? Or how should I bind a ToggleButton to a bool? Thank you.
Your XAML binds to LogXChecked, but your ViewModel defines this as IsLogXChecked. Right now, the binding is broken because the property name doesn't match the binding specification.
You can fix this on either side - for example, fix this in the Xaml via:
<ToggleButton Width="40" Height="20" Margin="2"
Grid.Row="1" Content="LogX" VerticalAlignment="Center"
IsChecked="{Binding IsLogXChecked, Mode=TwoWay}" />
I'm new to WPF, but have been able make a lot of progress in short time thanks to a good book on the topic, and of course, quality posts on sites like this one. However, now I've come across something I can seem to figure out by those means, so I posting my first question.
I've have a ControlTemplate in a resource dictionary which I apply to several UserControl views. The template provides a simple overlay border and two buttons: Save and Cancel. The templated user control holds various text boxes, etc., and is bound to some ViewModel depending on the context. I'm trying to figure out how to bind the commands to the Save/Cancel buttons when I use/declare the UserControl in some view. Is this is even possible, or am I doing something very wrong?
First, the template:
<ControlTemplate x:Key="OverlayEditorDialog"
TargetType="ContentControl">
<Grid>
<Border HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Background="DarkGray"
Opacity=".7"/>
<Border HorizontalAlignment="Center"
VerticalAlignment="Center"
Background="DarkGray">
<Grid>
<RowDefinition Height="Auto"/>
<RowDefinition/>
</Grid.RowDefinitions>
<ContentPresenter Grid.Row="0"/>
<Grid Grid.Row="1"
Margin="10">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Button Grid.Column="1"
Content="Cancel"
***Command="{Binding CancelCommand}}"**
/>
<Button Grid.Column="0"
Content="Save"
***Command="{Binding Path=SaveCommand}"***/>
</Grid>
</Grid>
</Border>
</Grid>
</ControlTemplate>
The template in turn is used in the CustomerEditorOverlay user control
<UserControl x:Class="GarazhApp.View.CustomerEditorOverlay"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
<UserControl.Resources>
<ResourceDictionary Source="Dictionary1.xaml"/>
</UserControl.Resources>
<ContentControl Template="{StaticResource ResourceKey=OverlayEditorDialog}">
<Grid Grid.Row="0"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
</Grid.RowDefinitions>
<SomeElement/>
<SomeOtherElement/>
</Grid>
</ContentControl>
...and finally, the user control is used as part of a view like so:
<local:CustomerEditorOverlay Visibility="{Binding Path=CustomerViewModel.ViewMode, Converter={StaticResource myConverter}, FallbackValue=Collapsed}"
d:IsHidden="True" />
So, based on what I've learned from a project I have been on forever and a half, we have a workable pattern.
Let's say you have a bunch of modal windows that all get applied the same style within the application. To have Save and Cancel buttons on each view, the UserControl used for all of the modal windows has several dependency properties. In addition, we specify virtual methods for your commands (e.g. OnSaveCommand, OnCancelCommand, CanExecuteSaveCommand, CanExecuteCancelCommand) and the commands themselves as properties in a base ViewModel that is inherited by your views.
Ultimately, what happens is we create new modal windows by simply doing this:
<my:YourBaseView x:class="MyFirstView" xmlns:whatever="whatever" [...]>
<my:YourBaseView.PrimaryButton>
<Button Content="Save" Command="{Binding SaveCommand}" />
</my:YourBaseView.PrimaryButton>
<!-- some content -->
</my:YourBaseView>
With accompanying code-behind:
public class MyFirstView : YourBaseView
{
[Import] /* using MEF, but you can also do MvvmLight or whatever */
public MyFirstViewModel ViewModel { /* based on datacontext */ }
}
And a ViewModel:
public class MyFirstViewModel : ViewModelBase
{
public override OnSaveCommand(object commandParameter)
{
/* do something on save */
}
}
The template for this UserControl specifies ContentControls in a grid layout with the Content property bound to the PrimaryButton and SecondaryButton. Of course, the content for the modal is stored in the Content property of the UserControl and displayed in a ContentPresenter as well.
<Style TargetType="{x:Type my:YourBaseView}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type my:YourBaseView}">
<Grid>
<!-- ignoring layout stuff -->
<ContentControl Content="{TemplateBinding Content}" />
<ContentControl Content="{TemplateBinding PrimaryButton}" />
<ContentControl Content="{TemplateBinding SecondaryButton}" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
UserControl code:
public class YourBaseView : UserControl
{
public static readonly DependencyProperty PrimaryButtonProperty =
DependencyProperty.Register("PrimaryButton", typeof(Button), typeof(YourBaseView), new PropertyMetadata(null));
public Button PrimaryButton
{
get { return (Button)GetValue(PrimaryButtonProperty); }
set { SetValue(PrimaryButtonProperty, value); }
}
/* and so on */
}
You can change the style for each instance of your templated view, of course. We just happen to stick with one base style.
TL;DR edit: I may have gone a bit overboard since I think you just need the understanding that exposing dependency properties of type Button which are set up through the XAML each time you create a new overlay. That, or you could probably RelativeSource your way back up to the visual tree with something like {Binding DataContext.SaveCommand, RelativeSource={RelativeSource AncestorType={x:Type MyView}}} but it's a little dirtier.