I'm developing some apps for windows phone using c# but I have some troubles trying to pass some data (textblocks, images etc) from the MainPage to other classes.
I can explain it better saying:
I have MainPage.xaml + MainPage.xaml.cs (where my image is called "myImage"). This is the xaml code:
<Image Name="myImage" DataContext="{Binding}" />
and using buttons in this class I can change the image simply typing:
myImage.Source = new BitmapImage(new Uri("images/xxxx.png", UriKind.Relative));
and it works.
I have an another class "x.cs" and I want to change the image when something happends, but how can I can access myImage from this class and change its Source without using timers? I've searched a lot without finding interesting things...
There are couple of way to do the same.
1). Event - Raise event - Subscribe event mechanism.
2). Use Event Aggregator instead of traditional event delegation model.
3). Use INotifyPropertyChange or similar object to get notification on some change and do what is intented to be done.
None of them would be hard to understand, find, learn and implement.
Related
I am completely new to MVVM and I am creating an UWP app for keeping track of my software development, I am still learning.
So what I want to make is:
An app that contains single page ->
In MainPage.xaml I have something like this:
<!--MainPage Content-->
<Grid>
<!--For SearchBox-->
<AutoSuggestBox x:Name="SearchBox"/>
<!--For Adding Item-->
<AppBarButton x:Name="AddAppButton"/>
<!--Listview that contains main data-->
<ListView x:Name="AppsListView"/>
<!--This is DataTemplate of listview-->
<DataTemplate>
<Grid>
<!--Icon of App-->
<Image/>
<!--Name of App-->
<TextBlock/>
<!--For Editing Item-->
<AppBarButton/>
<!--For Deleting Item-->
<AppBarButton/>
</Grid>
</DataTemplate>
</Grid>
In Model I have something like this:
public class DevApp
{
public string name { get; set; } // For App Name
public string Iconsource { get; set; } // For App Icon
public ICommand EditCommand; // For Edit AppBarButton
public ICommand DeleteCommand; // For Delete AppBarButton
}
In ViewModel, something like :
public class ViewModel
{
// For ItemSource of ListView
public ObservableCollection<DevApp> DevApps = new ObservableCollection<DevApp>();
// For Add AppBarButton
public ICommand AddCommand;
}
Now this is me first time trying to create a neat and clean Mvvm app.
Now I have this question:
I know how to bind command to button or AppBarButton but how am I supposed to bind a Methods of a Xaml Control such as Listview's SelectionChanged() or AutoSuggestBox's TextChanged() Methods to ViewModel ?
How can I Load Data from save file ? As there is no InitializeComponent() in ViewModel like in CodeBehind to start from, where shall I pull LoadData() method which loads data to ListView ? ( my viewmodel is bind to view using <MainPage.DataContext> and I wanna keep code behind completely empty. )
Where shall I put Data class that can manage load save and edit data to savefile.
How shall I distribute responsibilities among classes ?
I have seen people using mvvm and they create files like:
services, helpers, contracts, behaviours, etc.
and I have seen same thing in Windows Community Toolkit Sample App
Is it required for Mvvm.
And what are services and helpers.
Shall I really use Mvvm for this ?
I tried using Mvvm in this just for curiosity but like
ITS BEEN 1 MONTH I AM MAKKING THIS APP! but it gets messed up again and again,
If I used Code Behind it would have been done in few days.
BY time now I realize that Mvvm is good at data bind in complex apps but
When it comes to simple things like a simple app with listview, I think code-behind
is better and it keeps things simple.
Please answer these questions I am really struggling in making this app.
I know how to bind command to button or AppBarButton but how am I supposed to bind a Methods of a Xaml Control such as Listview's SelectionChanged() or AutoSuggestBox's TextChanged() Methods to ViewModel
You could bind SelectionChanged with command by using Xaml Behavior InvokeCommandAction, or using x:bind markup extension to bind a method, for more please refer to this link.
How can I Load Data from save file ? As there is no InitializeComponent() in ViewModel like in CodeBehind to start from, where shall I pull LoadData() method which loads data to ListView ? ( my viewmodel is bind to view using <MainPage.DataContext> and I wanna keep code behind completely empty. )
Base on the first question, you could detect Page Loaded event and Invoke CommandAction where in the ViewModel. Then loading the file in the viewmodel LoadedCommand.
<i:Interaction.Behaviors>
<ic:EventTriggerBehavior EventName="Loaded">
<ic:InvokeCommandAction Command="{x:Bind ViewModel.LoadedCommand}" />
</ic:EventTriggerBehavior>
</i:Interaction.Behaviors>
Where shall I put Data class that can manage load save and edit data to savefile
The better place that savefile is current app's local folder, and it have full access permission, please refer to Work with files document.
How shall I distribute responsibilities among classes ?
I have seen people using mvvm and they create files like:
services, helpers, contracts, behaviours, etc.
and I have seen same thing in Windows Community Toolkit Sample App Is it required for Mvvm. And what are services and helpers.
For mvvm design, model view viewmodel are necessary. And it is not necessary to make services, helpers, contracts, behaviours, it should base on your design. For example if you want to make NavigateService, you need make static service class to manager current app's navigation. We suggest you make sample project with TempleStudio that contains some base service and behaviors.
Shall I really use Mvvm for this ?
I tried using Mvvm in this just for curiosity but like
ITS BEEN 1 MONTH I AM MAKKING THIS APP! but it gets messed up again and again,
If I used Code Behind it would have been done in few days. BY time now I realize that Mvvm is good at data bind in complex apps but
When it comes to simple things like a simple app with listview, I think code-behind
is better and it keeps things simple.
Your understanding is correct, But Decoupling(mvvm) your code has many benefits, including:
Enabling an iterative, exploratory coding style. Change that is isolated is less risky and easier to experiment with.
Simplifying unit testing. Code units that are isolated from one another can be tested individually and outside of production environments.
Supporting team collaboration. Decoupled code that adheres to well-designed interfaces can be developed by separate individuals or teams, and integrated later.
Improving maintainability. Fixing bugs in decoupled code is less likely to cause regressions in other code.
In contrast with MVVM, an app with a more conventional "code-behind" structure typically uses data binding for display-only data, and responds to user input by directly handling events exposed by controls. The event handlers are implemented in code-behind files (such as MainPage.xaml.cs), and are often tightly coupled to the controls, typically containing code that manipulates the UI directly. This makes it difficult or impossible to replace a control without having to update the event handling code. With this architecture, code-behind files often accumulate code that isn't directly related to the UI, such as database-access code, which ends up being duplicated and modified for use with other pages.
I have a UWP app that opens a projection window (similar to the sample app). Now I want react to the RotationChanged-Event in both windows regardless of which window is active.
Can I somehow share the instance for the RadialController? Or do I have to manage it in one view and manually pass the event to the second one?
Updated Question: How do I use the same ViewModel instance in both windows?
P.s: I think adding RadialController and/or Surface-Dial as tags might make sense.
Using UWP, I think you are supposed to use the MVVM pattern.
If you are using the MVVM pattern, having multiple GUI Elements (Windows included) react to a single ViewModel change would be trivial.
So the real question is: Are you use the MVVM pattern, another pattern or no pattern at all?
If you need to learn it first, I wrote something about it regarding to WPF (UWP is a followup of WPF, with App-related backend stuff thrown in):
https://social.msdn.microsoft.com/Forums/vstudio/en-US/b1a8bf14-4acd-4d77-9df8-bdb95b02dbe2/lets-talk-about-mvvm?forum=wpf
Unfortunately it's not as simple as using the same ViewModel as #IInspectable pointed out. That's why I sent a command to the second view on every Dial_RotationChanged. Not as pretty as I would have hoped, but works quite well so far.
The code looks somewhat like this:
private async void Dial_RotationChanged(RadialController sender,
RadialControllerRotationChangedEventArgs args)
{
await ProjectionViewPageControl.Dispatcher.RunAsync(CoreDispatcherPriority.Normal,
() =>
{
var thePage = (DetailPage)((Frame)Window.Current.Content).Content;
thePage.ProjectionTest(args.RotationDeltaInDegrees);
});
}
I'm really confused about this Topic. None of the tutorials I found to e.g. move objects around when there's touch input works. For example they all do something like this:
Control.AddHandler(UIElement.ManipulationStartedEvent, new EventHandler
<ManipulationStartedEventArgs>(Control_ManipulationStarted), true);
But there's no ManipulationStartedEventArgs, VS2013 can't find it and there's no way to add a using directive. Are those tutorials old and did MS change the way the ManipulationDelta works?
Adding it with the EventHandler section of the Properties section again doesn't work, no Event is fired no matter what I'm trying to do.
For manipulation to work the UI Element must have ManipulationMode property set to something other than None or System to be a manipulation event source; i.e Set ManipulationMode to TranslateX if you want an event to fire on a horizontal pointer movement.
For UI manipulation in Windows Universal you have 3 events:
ManipulationStarted
ManipulationDelta
ManipulationCompleted
Each with their own EventArgs under System.Windows.Input namespace
ManipulationStartedEventArgs
ManipulationDeltaEventArgs
ManipulationCompletedEventArgs
The problem may however be the type of UI Element that you are using, not all accept/generate manipulation events.
Examples of UI Elements that don't:
WebView
(I expect Canvas but not sure, haven't tested)
Examples of UI Elements that do:
Textblock
ListView
I am a beginner in c# programming and I am developing windows phone application after reading some tutorials.
My idea is when the user clicks a button in a windows page, some other button in other windows phone page must change color from red to green.
Pardon me if I am too Basic.
This I have defined in a page named "IndexPage.xaml"
<Button x:Name="One_green"
Content="1"
Background="Green"
Click="One_Click"
/>
<Button x:Name="One_red"
Content="1"
Background="Red"
Click="One_Click"
/>
Now I see red color button in my window as green button is hidden in the back.
Now, the following code is from another windows phone page "1.xaml"
<Button Content="GO" Click="Button_Click"/>
Now when the user clicks the "GO" Button I want the button to change to red to green in "IndexPage.xaml". So I tried a code something like this in "1.xaml.cs"
private void Button_Click(object sender, RoutedEventArgs e)
{
One_red.Visibility = Visibility.Collapsed;
One_green.Visibility = Visibility.Visible;
}
But I am not able to access the "One_red" or "One_green" button in the above code. Please shed me directions.
Also I want that code to execute only once. (i.e.) when the IndexPage.xaml loads again I want that button to be green always.
Thank you very much in advance.
Please tell me if some other details are required.
You could define a public or internal static variable inside the "Index.xaml" class specifying what button will show on load until otherwise specified. This variable could be accessed outside the class, and possibly even outside the project depending on the modifier chosen. The constructor of the "Index.xaml" class could have code to reset it to the default to ensure it only happens on the next creation of the page. If you aren't creating a new page everytime, you would have to put the default resetters in a method called when you want to bring it to foreground.
It seems to me that you are trying to learn, rather than having a SPEC to follow and implement.
Because of that, and because you are starting with C# in 2014 (almost 2015),
it will be quite beneficial for you to jump straight to data-binding declarative over imperative, going MVVM (MVVx) over MVC (MVx).
XAML was designed around this pattern. It's the natural way of doing things in XAML, a perfect fit and the perfect platform to learn the pattern.
It requires lots of learning, thinking, and re-learning, but it will open your eyes to modern programming techniques.
That said... there are too many ways of doing what you asked for, and while none are exactly wrong, there are 2 current trends in .Net/C#/MsTech which IMO are NOT a waste of your time:
Functional Reactive Programming and OOP/MVVx (the x is for whatever).
Examples are ReactiveUI, Reactive Extensions, PRISM, Caliburn.Micro and many more. They can be combined, the same way you can combine traditional event-driven/event callbacks with MVVM and/or Reactive Programming. However, I would advise against it.
I'll start with the most documented way.
Look at Data binding for Windows Phone 8. It was the first result when I googled "windows phone 8 xaml data binding," and deals with Colors and controls.
If you follow that example and add a resource to your application, you are done.
Of course, you can still use event => onClick + static class to hold the value in between View instances, but if I was right on the assumption that you are trying to learn, I wouldn't go that route.
Sorry if I drifted. :)
You may not be able to access the button click event because it is private, you may need to make it protected or public, the default access specifier would probably be ok as well.
public void Button_Click(object sender, RoutedEventArgs e)
or default would be:
void Button_Click(object sender, RoutedEventArgs e)
I'm working on an application, and I'm using the MVVM approach.
Basically, there are currently two Pages, and 1 MainWindow.
I switch between the pages using a Frame inside MainWindow.
In the main window, there are 2 buttons which are basically global and should show in all pages; x (exit) and settings.
This is basically my 'shell', as I decided to not use a window border.
The problem is I'd like each page to have a different background and this is where it gets complicated:
- Settings page: Grey background.
- Main Page: Rotating background color that changes according to a property.
The thing is the background is being set in the main window, because it should apply to the global area as well (the top, where the exit and settings buttons are).
I first set the background (in MainWindow) as bound to a property the represents the current page (the value is then being translated into a color hex code with the help of a converter).
All in all, this results in a case where the background changes when a page is changed, but not when the property inside MainPage changes. I can clearly understand why, but I have no idea how to solve it.
The possible solutions I came up with so far:
Somehow causing the binding in MainWindow to update/refresh when the property is changed in MainPage.
Changing the background manually from inside each of the pages. (Although doesn't it negate the idea of mvvm?)
Move the background into each of the pages and set it from there, while making the global buttons on top of the page (which could be a bad thing in case controls end up overlapping).
If so, what would be the best solution to this problem?
If you haven't already, I'd suggest you install some package via NuGet to make MVVM style development more enjoyable. I personally prefer MVVMLight which is... well, light, but it also packs lot's of helpful features.
To communicate between ViewModels, you have (at least) two possible approaches.
1) ViewModelLocator (not recommended)
ViewModelLocator is central place holding references to all of your viewmodels. You could add a property that is then used by all of the viewmodels to get/set the background.
....
x:Name="Main"
DataContext="{Binding Source={StaticResource Locator}, Path=MainVM}">
....
<Grid Background="{Binding Background, Converter={StaticResource StringBrushConverter}}">
...
2) Messenger (recommended)
When ever property changes in your viewmodel(s) or method is executed, you could send a message that your MainViewModel is registered to listen to. Sending a message would be as easy as...
Messenger.Default.Send(new UpdateBackgroundMessage(new SolidColorBrush(Colors.Blue)));
And you'd register for this message in your MainViewModel's constructor:
Messenger.Default.Register<UpdateBackgroundMessage>(this, message =>
{
Background = message.Brush;
});
Actual message class would be:
public class UpdateBackgroundMessage : MessageBase
{
public UpdateBackgroundMessage(Brush brush)
{
Brush = brush;
}
public Brush Brush { get; set; }
}
I know I'm simplifying things here but I hope you got the idea. Both approaches are valid even if you decide not to use MVVMLight.
Edit:
Here's Git repo with example https://github.com/mikkoviitala/cross-viewmodel-communication
I think you should use Application Properties for storing background. There are various benefit of this :
1) Globally available
2) Easy to remember or store user preference
3) Automatically maintain separate profile for each user as it store values in AppData folder of user.
you can use Messenger to notify that background property has changed so that main window or shell could pull out new background value and update it.