Click here to Skip to main content
13,800,880 members
Click here to Skip to main content
Add your own
alternative version

Stats

6.3K views
197 downloads
6 bookmarked
Posted 22 May 2018
Licenced CPOL

Creating a C# Prism WPF Twitter Reader

, 2 Jun 2018
Rate this:
Please Sign up or sign in to vote.
Create a Twitter Reader with Microsoft Prism Library 6.3 for WPF

Introduction

This article illustrates how to make a Twitter Reader using Microsoft Prism Library 6.3 for WPF. My main purpose is to provide a working sample that you can compile and run.

If you are NOT interested in Prism, this article is not for you. For a regular WPF Twitter Reader, please see my previous article:

Background

Prism is a framework for developing composite applications. It is created by Microsoft Patterns and Practice group. The Prism library relies heavily on design patterns such as Dependency Injection, Command, and MVVM.

There is lots of information on the web about Prism. In this article, I will simply mention the concepts such as Bootstrapper, Shell, Regions, Modules, Views, and View-Based Navigation.

I expect you to know Prism in general. I am trying to show a working sample to provide useful tips on how to use Prism, WPF, MVVM, and so on. Therefore, downloading and studying the code is the key. Note that I didn't even include binary download because of the importance of the source code.

Using the Code

When launched, the app looks like this:

protected override void OnStartup(StartupEventArgs e)
{
    var bootstrapper = new Bootstrapper();                
    bootstrapper.Run();
}

The bootstrapper.Run() kicks off the execution. The Bootstrapper added LiveTweetsModule and SavedTweetsModule to ModuleCatalog (but the modules have not been loaded yet). It resolved ShellWindowViewModel using Unity Container, created ShellWindow, and showed the window. As shown above, Twitter account @TweetTesterNET has logged in.

The solution consists of 4 projects and libraries:

The LiveTweetsModule (so does SavedTweetsModule) organizes its code with NavigationRegion, TaskButtonRegion, and WorkspaceRegion folders. Each folder consists of a View and its ViewModel.

If you click 'Show Live Tweets Module' button and select @dotnet, you will get this:

The following code has been executed:

private void ExecuteShowTweetListCommand() 
{     
    // Show Navigator     
    var usersNavigator = new Uri("LiveUsers", UriKind.Relative);     
   _regionManager.RequestNavigate("NavigatorRegion", usersNavigator, 
                                    ShowLiveTweetsUserListNavigationCompleted);   

    // Show Workspace     
   var tweetsNavigator = new Uri("LiveTweets", UriKind.Relative);     
   _regionManager.RequestNavigate("WorkspaceRegion", tweetsNavigator);
}

The region manager requested to navigate to "LiveUsers" region, which is the user list on the left. It also shows tweet list by requesting to navigate to "LiveTweets" region. This is called view-based navigation.

At this point, LiveTweetsModule is loaded. Navigation region is populated with friends (users) of @TweetTesterNET. Workspace region is displayed with live tweets of the currently selected user (i.e., @dotnet).

Sometimes, you see an interesting tweet with some particular information (say, a link to a web site). Because existing tweets can be pushed out by new tweets quickly, you may want to save the tweet locally. Every tweet has an image on the left side of the tweet text. If you click the image, the tweet will be saved to a local file called SavedTweets.json.

private void ExecuteSaveUserTweetCommand(TweetModel tweetModel)
{                      
    _dataService.SaveUserTweetToRepo(SelectedUserModel, tweetModel);
}

In the code above, _dataService is ITweetDataService, which is implemented by ShellWindowViewModel like this:

public void SaveUserTweetToRepo(UserModel userModel, TweetModel tweetModel)
{          
    var user = _savedTweetsModel.UserModelList.FirstOrDefault(x => x.UserId == userModel.UserId);
    if (user == null)
    {
        user = new UserModel(userModel);
        _savedTweetsModel.UserModelList.Add(user);
    }
    if (!user.TweetModelList.Any(x => x.TweetId == tweetModel.TweetId))
    {
        user.TweetModelList.Add(tweetModel);
        JsonHelper.SaveAsJsonToFile(_savedTweetsModel, _savedTweetsFilePath);
        CurrentStatusMessage = $"The tweet (Id: {tweetModel.TweetId}) saved in 
                               {Path.GetFileName(_savedTweetsFilePath)}";
    }         
}

If you click 'Show Saved Tweets Module', you will be able to view saved tweets from SavedTweets.json:

As you can see, you can delete a saved tweet by clicking the 'X' image on the left side of the saved tweet. The deletion command logic flow is similar to that of the save command.

At the end, you can open SavedTweets.json from the working folder in Windows Explorer to view what has been saved.

Points of Interest

If you follow instructions in TwitterCredentialsSetup.txt, you can use your own Twitter account with the app.

If you feel the article does not provide the level of details you are looking for, please download and study the code, which is my ultimate goal. Let the code do the talking since this is CODE PROJECT after all!

History

  • 5/23/2018: Updated content
  • 5/20/2018: First version released
    • Compiled with Visual Studio 2015
    • Also working with VS 2017

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Peter Sun (247)
Software Developer (Senior)
United States United States
I have been a full stack Windows developer for 20+ years and is based in Orange County, California. Currently, I am focusing on C#, WPF, Azure, .NET Core, and Xamarin.

You may also be interested in...

Pro

Comments and Discussions

 
GeneralMessage Closed Pin
3-Jun-18 21:55
memberMember 138371233-Jun-18 21:55 
QuestionPlease expand your content. Pin
Pete O'Hanlon23-May-18 0:48
protectorPete O'Hanlon23-May-18 0:48 
AnswerRe: Please expand your content. Pin
Peter Sun (247)24-May-18 21:09
memberPeter Sun (247)24-May-18 21:09 
GeneralRe: Please expand your content. Pin
Pete O'Hanlon24-May-18 23:32
protectorPete O'Hanlon24-May-18 23:32 
GeneralRe: Please expand your content. Pin
Peter Sun (247)25-May-18 21:56
memberPeter Sun (247)25-May-18 21:56 
GeneralRe: Please expand your content. Pin
EveryNameIsTakenEvenThisOne9-Jun-18 13:20
professionalEveryNameIsTakenEvenThisOne9-Jun-18 13:20 
GeneralRe: Please expand your content. Pin
Peter Sun (247)9-Jun-18 17:24
memberPeter Sun (247)9-Jun-18 17:24 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Cookies | Terms of Use | Mobile
Web01 | 2.8.181215.1 | Last Updated 3 Jun 2018
Article Copyright 2018 by Peter Sun (247)
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid