Overblog Suivre ce blog
Administration Créer mon blog

Présentation

  • : Romagny13 - Du .NET,du pur .NET
  • Romagny13 - Du .NET,du pur .NET
  • : Cycle de progression Faire (quelque chose qui marche) -> comprendre ce que l’on fait/comment cela marche -> pousser plus loin les notions
  • Contact

Recherche

Articles Récents

12 mai 2014 1 12 /05 /mai /2014 21:54

 

unitywinrt1.png

 

Important

Pourquoi respecter ses conventions ? Parce que ça vous évitera de chercher pourquoi ça ne marche pas icon_surprised.gif:

Les Views sont dans un dossier « Views »

  •          avec le namespace « *.Views »
  •          et un nom de vue se terminant par « Page » (exemple MainPage)

Les ViewModels sont dans un dossier « ViewModels »

  •           avec le namespace « *.ViewModels »
  •           Le nom du ViewModel doit correspondre au nom de la vue

Exemple la vue MainPage a pour ViewModel MainPageViewModel .Pour la navigation on appelera « Main »

-          Attention aussi à ne pas avoir plusieurs constructeurs avec le même nombre de paramètres

 unitywinrt2.png


Pour rappel

  • La page de démarrage App.xaml hérite de MvvmAppBase
  • Les vues(Views) sont des VisualStateAwarePage
  • Les ViewModels héritent de ViewModel (Microsoft.Practices.Prism.StoreApps)

 

Ajouter aux pages Prism:ViewModelLocator.AutoWireViewModel="True"

Exemple

<Prism:VisualStateAwarePage

    x:Class="Shop.PrismWinRT.Views.ArticlePage"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:local="using:Shop.PrismWinRT.Views"

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

    xmlns:Prism="using:Microsoft.Practices.Prism.StoreApps"

    Prism:ViewModelLocator.AutoWireViewModel="True"

    mc:Ignorable="d">

    <!-- etc. -->

  

App.xaml.cs

Ici on enregistre une instance(comme un singleton) de NavigationService

    sealed partial class App : MvvmAppBase

    {

        private IUnityContainer container = new UnityContainer();

 

        public App()

        {

            this.InitializeComponent();

        }

 

        protected override Task OnLaunchApplication(LaunchActivatedEventArgs args)

        {

            NavigationService.Navigate("Main", null);

            Window.Current.Activate();

            return Task.FromResult<object>(null);

        }

 

        protected override void OnInitialize(IActivatedEventArgs args)

        {           

            container.RegisterInstance<INavigationService>(NavigationService);

 

            ViewModelLocator.SetDefaultViewModelFactory((viewModelType) =>

            {

                return container.Resolve(viewModelType);

            });

        }  

    }

 

 

 

D’autres exemples d’enregistrement (enregistrement de repository et SessionStateService) :

container.RegisterInstance<ISessionStateService>(SessionStateService);

container.RegisterType<IArticleRepository, ArticleRepository>(new ContainerControlledLifetimeManager());


ViewModel MainPageViewModel associé à MainPage.xaml

public class MainPageViewModel :ViewModel

    {

        public ObservableCollection<ArticlePageViewModel> Items { get; set; }

 

        private ArticlePageViewModel _currentItem;

 

        public ArticlePageViewModel CurrentItem

        {

            get { return _currentItem; }

            set

            {

                _currentItem = value;

                OnPropertyChanged("CurrentItem");

            }

        }

        public DelegateCommand<ArticlePageViewModel> DetailArticleCommand { get; private set; }

        private INavigationService navigationService;

        private IArticleRepository articleRepository;

 

        public MainPageViewModel(INavigationService navigationService)

        {

            this.navigationService = navigationService;

            DetailArticleCommand = new DelegateCommand<ArticlePageViewModel>(vm => navigationService.Navigate("Article", vm));

            GetAll();

        }

       

        public async void GetAll()

        {

            articleRepository = new ArticleRepository();

            IList<ArticleModel> articles = await articleRepository.GetAllAsync();

            Items = new ObservableCollection<ArticlePageViewModel>();

            foreach (ArticleModel article in articles)

                Items.Add(new ArticlePageViewModel(navigationService, article));

 

            OnPropertyChanged("Items");

        }

    }

On appelle la page ArticlePage(et passage de paramètre ,ici le viewmodel courant)  avec navigationService.Navigate("Article", vm)


ViewModel ArticlePageViewModel(permettant d’afficher le détail d’un article) associé à ArticlePage.xaml

  public class ArticlePageViewModel : ViewModel 

    {

        private ArticleModel _article;

 

        public ArticleModel Article

        {

            get { return _article; }

            set

            {

                _article = value;

                OnPropertyChanged("Article");

            }

        }

 

        private INavigationService navigationService;

        public DelegateCommand GoBackCommand { get; private set; }

 

        public ArticlePageViewModel(INavigationService navigationService, ArticleModel article)

        {

            this.navigationService = navigationService;

            this.Article = article;

 

            GoBackCommand = new DelegateCommand(() =>

            {

                if (navigationService.CanGoBack())

                    navigationService.GoBack();

            });

        }

 

        public override void OnNavigatedTo(object navigationParameter,

                                            NavigationMode navigationMode,

                                            Dictionary<string, object> viewModelState)

        {

            this.Article = ((ArticlePageViewModel)navigationParameter).Article;

        }

    }

 

Ressources

http://msdn.microsoft.com/fr-fr/library/windows/apps/xx130638.aspx

Repost 0
Published by Romagny13 - dans Prism for WinRT
commenter cet article
8 mai 2014 4 08 /05 /mai /2014 16:29
  • Gestionnaire de package NuGet chercher « sassandcoffee »

  • Ou taper directement dans la console install-package SassAndCoffee

 sass1

Ajouter une feuille de style SASS (extension *.scss)

 sass2.png

 

<link rel="stylesheet" type="text/css" href="Css/DemoSass.css" />

 

Lorsque l’on sauvegarde une feuille de style correspondante est automatiquement générée

Variables

Les variables SASS sont déclarées avec $

$nomvariable :valeur

 

Quelques utilisations

sass71.png

 

sass8.png

 sass7.png

 On peut également faire des boucles avec Sass.@extend et les rules sont également intéressants.

Code

DemoSass.scss

@import "SizesSass.scss"; // Import

@import "MixinsSass.scss";

 

//Variables

$base-background:Skyblue;

$base-color:white;

$alternative-color:gray;

$root:"/Images/";

$base-class-name:"maclasse";

 

 

// fonction

@function big-size($size)

{

    @if($size < 50)

    {

        @return ($size + 20px);

    }

    @else

    {

        @return ($size);

    }

}

 

.#{$base-class-name}1

{

    color:$alternative-color;

    font-size:big-size(40px); // utilisation de  la fonction

}

 

body { 

    background-image:url("#{$root}backgr1.png"); // injection de chaine

}

 

p{

     color:lighten($base-color,50%); // une fonction de couleur

     font-size:$base-font-size + 10px; // une opération

}

 

#content{

     background:$base-background;

    @include border-radius-all(10px); //mixin

}

 

// nested rules

a{

    text-decoration:none;

    &:hover{

        text-decoration:underline;

    }

}

 

MixinsSass.scss

@mixin border-radius-all($size) {

  -webkit-border-radius: $size;

     -moz-border-radius: $size;

          border-radius: $size;

}

 

SizesSass.scss

$base-font-size:12px;

 

Et Default.aspx

%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="LessSassTraining.Default" %> 

 

<!DOCTYPE html> 

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title></title>

     <link rel="stylesheet" type="text/css" href="Css/DemoSass.css" />

</head>

<body>

    <form id="form1" runat="server">

    <div id="content">

     <p>Hello World ! <a href="#">Sass is cool !!</a></p>

        <p class="maclasse1">Demo injection</p>

    </div>

    </form>

</body>

</html>

 

 

Ressources

http://sass-lang.com/guide

http://sass-lang.com/documentation/file.SASS_REFERENCE.html

Chirpy  http://chirpy.codeplex.com/

Repost 0
Published by Romagny13 - dans HTML5-CSS3
commenter cet article
8 mai 2014 4 08 /05 /mai /2014 00:43

Pourquoi utiliser Less ? quelques exemples

  • Permet de définir des variables (couleurs, taille, chaine de caractères, etc.) syntaxe :  @nomvariable :valeur

  • Fonctions  exemple       color:fade(@main-forecolor,50%); 

  • Opérations exemple     font-size:@main-font-size + 10px;

  • Mixins

Exemple

/*.border-radius{

    border-radius:5px;

    -moz-border-radius:5px;

    -webkit-border-radius:5px;

 

}*/

.border-radius(@size:5px){

    border-radius:@size;

    -moz-border-radius:@size;

    -webkit-border-radius:@size;

 

}

Utilisations

   // .border-radius;

    .border-radius(10px);// ou  .border-radius()

  • Nested Rules

a{

    text-decoration:none;

    &:hover{

        text-decoration:underline;

    }

}

donne

a {

  text-decoration: none;

}

a:hover {

  text-decoration: underline;

}

 

Ressources

http://lesscss.org/features/

Fonctions http://lesscss.org/functions/

Comparaison code généré dans Visual Studio  

 less7.png

Utilisation des outils de développement (exemple avec Chrome)

 less6.png

Dotless

http://www.dotlesscss.org/

Dans web.config : <dotless minifyCss="false" cache="true" web="false" />

On peut demander à minimiser le fichier css ;

Repost 0
Published by Romagny13 - dans HTML5-CSS3
commenter cet article
8 mai 2014 4 08 /05 /mai /2014 00:04

1-« Installation »

  • Ajouter un fichier less (exemple « Default.less »)

  • Depuis le gestionnaire de package NuGet chercher le fichier JavaScript(chercher « lesscss » ou « less.js ») .

  • On peut aussi utiliser un CDN .

    <script src="//cdnjs.cloudflare.com/ajax/libs/less.js/1.7.0/less.min.js"></script>


less1

  • Dans l'en-tête de la page :

<link rel="stylesheet" type="text/css" href="Css/Default.css" />

<script type="text/javascript" src="Scripts/less-1.5.1.min.js"></script>

   

http://lesscss.org/#

2-Variable

On tape quelques variables que l’on utilise. Une feuille de style « Default.css » est générée automatiquement à partir de mon fichier « Default.less » dès que l’on sauvegarde .

less3.png

 

Le style est bien appliqué à la page …

less4.png

Astuce : on peut créer un fichier avec toutes les couleurs et l’importer ensuite

 

 

Repost 0
Published by Romagny13 - dans HTML5-CSS3
commenter cet article
7 mai 2014 3 07 /05 /mai /2014 13:14

On a un GridView et une ListView cachée(Visibility="Collapsed") .On utilise un VisualStateManager pour adapter la page . On a donc un GridView ... et une ListView lorsque la vue est "snapped" .

  <Page.Resources>

        <CollectionViewSource x:Name="groupedItemsViewSource"

                              Source="{Binding Countries}"

                              ItemsPath="Persons"

                              IsSourceGrouped="True" />

    </Page.Resources>

 

 

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

       <!-- 1 GridView --> 

        <GridView x:Name="gv" ItemsSource="{Binding Source={StaticResource  groupedItemsViewSource}}"

                          AutomationProperties.AutomationId="ItemGridView"

                          AutomationProperties.Name="Grouped Items"

                          ItemTemplate="{StaticResource Standard250x250ItemTemplate}"

                          Margin="116,0,40,46" >

            <GridView.ItemsPanel>

                <ItemsPanelTemplate>

                    <VirtualizingStackPanel Orientation="Horizontal"/>

                </ItemsPanelTemplate>

            </GridView.ItemsPanel>

            <GridView.GroupStyle>

                <GroupStyle>

                    <GroupStyle.HeaderTemplate>

                        <DataTemplate>

                            <Grid Margin="20,0,0,0">

                                <Button AutomationProperties.Name="Group Title"

                                                Content="{Binding CountryName}"

                                                Style="{StaticResource TextBlockButtonStyle}"

                                        />

                            </Grid>

                        </DataTemplate>

                    </GroupStyle.HeaderTemplate>

                    <GroupStyle.Panel>

                        <ItemsPanelTemplate>

                            <VariableSizedWrapGrid Orientation="Vertical" Margin="0,0,50,0" />

                        </ItemsPanelTemplate>

                    </GroupStyle.Panel>

                </GroupStyle>

            </GridView.GroupStyle>

        </GridView>

       <!-- 2 ListView cachée --> 

        <ListView x:Name="lv"  ItemsSource="{Binding Source={StaticResource  groupedItemsViewSource}}" Visibility="Collapsed">

            <ListView.ItemTemplate>

                <DataTemplate>

                    <Grid Margin="6">

                        <Grid.ColumnDefinitions>

                            <ColumnDefinition Width="Auto"/>

                            <ColumnDefinition Width="*"/>

                        </Grid.ColumnDefinitions>

                        <Border Background="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}" Width="60" Height="60">

                            <Image Source="{Binding Image}" Stretch="UniformToFill" AutomationProperties.Name="{Binding Title}"/>

                        </Border>

                        <StackPanel Grid.Column="1" Margin="10,0,0,0">

                            <TextBlock Text="{Binding FullName}" Style="{StaticResource TitleTextBlockStyle}" TextWrapping="NoWrap" MaxHeight="40"/>

                        </StackPanel>

                    </Grid>

                </DataTemplate>

            </ListView.ItemTemplate>

            <ItemsControl.ItemContainerStyle>

                <Style TargetType="FrameworkElement">

                    <Setter Property="Margin" Value="0,0,0,10"/>

                </Style>

            </ItemsControl.ItemContainerStyle>

        </ListView>

       

       <!-- 3 VisualStateManager -->          

        <VisualStateManager.VisualStateGroups>

            <VisualStateGroup x:Name="ApplicationViewStates">

                <VisualState x:Name="FullScreenLandscape" />

                <VisualState x:Name="Filled" />

                <VisualState x:Name="FullScreenPortrait" />

                <VisualState x:Name="Snapped" >

                    <Storyboard>

                         <!--cache le gridView et affiche la listView-->

                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="gv" Storyboard.TargetProperty="Visibility">

                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>

                        </ObjectAnimationUsingKeyFrames>

                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="lv" Storyboard.TargetProperty="Visibility">

                            <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>

                        </ObjectAnimationUsingKeyFrames>

                    </Storyboard>

                </VisualState>

            </VisualStateGroup>

        </VisualStateManager.VisualStateGroups>

    </Grid>

 Code behind

         public MainPage()

        {

            this.InitializeComponent();

 

            DataContext = new CountryListViewModel();   

            Window.Current.SizeChanged += Current_SizeChanged;

        }

 

        private  void Current_SizeChanged(object sender, Windows.UI.Core.WindowSizeChangedEventArgs e)

        {

           string viewValue = ApplicationView.Value.ToString();

           VisualStateManager.GoToState(this, viewValue, false);

        }

 

Autre possibilité (ApplicationView étant «  obsolète »)

        private  void Current_SizeChanged(object sender, Windows.UI.Core.WindowSizeChangedEventArgs e)

        {

 

            if (e.Size.Width < 550)

            {

                VisualStateManager.GoToState(this, "Snapped", false);

            }

            if (e.Size.Width > 550)

            {

                VisualStateManager.GoToState(this, "FullScreenLandscape", false);

            }

        }

 

 

snapp1

 

http://msdn.microsoft.com/en-us/library/windows/apps/hh465349.aspx

Repost 0
Published by Romagny13 - dans WinRT
commenter cet article
7 mai 2014 3 07 /05 /mai /2014 12:26

 ListView

On peut utiliser une CollectionViewSource groupée ou non

<Page.Resources>

        <CollectionViewSource x:Name="groupedItemsViewSource"

                              Source="{Binding Countries}"

                              ItemsPath="Persons"

                              IsSourceGrouped="True" />

        <CollectionViewSource x:Name="nonGroupedItemsViewSource"

                              Source="{Binding PersonsWithCountries}"

                              IsSourceGrouped="False" />

    </Page.Resources>

 

        <ListView x:Name="lv"  ItemsSource="{Binding Source={StaticResource  groupedItemsViewSource}}">

            <ListView.ItemTemplate>

                <DataTemplate>

                    <Grid Margin="6">

                        <Grid.ColumnDefinitions>

                            <ColumnDefinition Width="Auto"/>

                            <ColumnDefinition Width="*"/>

                        </Grid.ColumnDefinitions>

                        <Border Background="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}" Width="60" Height="60">

                            <Image Source="{Binding Image}" Stretch="UniformToFill" AutomationProperties.Name="{Binding Title}"/>

                        </Border>

                        <StackPanel Grid.Column="1" Margin="10,0,0,0">

                            <TextBlock Text="{Binding FullName}" Style="{StaticResource TitleTextBlockStyle}" TextWrapping="NoWrap" MaxHeight="40"/>

                        </StackPanel>

                    </Grid>

                </DataTemplate>

            </ListView.ItemTemplate>

            <ItemsControl.ItemContainerStyle>

                <Style TargetType="FrameworkElement">

                    <Setter Property="Margin" Value="0,0,0,10"/>

                </Style>

            </ItemsControl.ItemContainerStyle>

        </ListView>

   

FlipView    

J’utilise la CollectionViewSource de l’exemple précédent

<FlipView ItemsSource="{Binding Source={StaticResource groupedItemsViewSource}}" Width="480" Height="270"

              BorderBrush="Black" BorderThickness="1">

            <FlipView.ItemTemplate>

                <DataTemplate>

                    <Grid>

                        <Image Width="480" Height="270" Source="{Binding Image}" Stretch="UniformToFill"/>

                        <Border Background="#A5000000" Height="80" VerticalAlignment="Bottom">

                            <TextBlock Text="{Binding FullName}" FontFamily="Segoe UI" FontSize="26.667" Foreground="#CCFFFFFF" Padding="15,20"/>

                        </Border>

                    </Grid>

                </DataTemplate>

            </FlipView.ItemTemplate>

        </FlipView>

Repost 0
Published by Romagny13 - dans WinRT
commenter cet article
7 mai 2014 3 07 /05 /mai /2014 01:47

Dans l'exemple j'affiche une liste de personnes rangée par pays .

-          Utiliser une CollectionViewSource ,

o   important la propriété IsSourcedGrouped

o   Source la source de base (exemple liste countries ici)

o   ItemsPath la liste des sous éléments(exemple la liste Persons)

-          ZoomedInView et ZoomedOutView j'affiche simplement une vue plus petite ici

 

<Page

    x:Class="WinRTBase.MainPage"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:local="using:WinRTBase"

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

    mc:Ignorable="d">

    <Page.Resources>

        <CollectionViewSource x:Name="groupedItemsViewSource"

                              Source="{Binding Countries}"

                              ItemsPath="Persons"

                              IsSourceGrouped="True" />

    </Page.Resources>

 

 

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

       

        <SemanticZoom x:Name="Zoom" Grid.Row="1" Margin="0,-3,0,0">

            <SemanticZoom.ZoomedInView>

                <GridView x:Name="gvCountries" ItemsSource="{Binding Source={StaticResource  groupedItemsViewSource}}"

                          AutomationProperties.AutomationId="ItemGridView"

                          AutomationProperties.Name="Grouped Items"

                          ItemTemplate="{StaticResource Standard250x250ItemTemplate}"

                          Margin="116,0,40,46">

                    <GridView.ItemsPanel>

                        <ItemsPanelTemplate>

                            <VirtualizingStackPanel Orientation="Horizontal"/>

                        </ItemsPanelTemplate>

                    </GridView.ItemsPanel>

                    <GridView.GroupStyle>

                        <GroupStyle>

                            <GroupStyle.HeaderTemplate>

                                <DataTemplate>

                                    <Grid Margin="20,0,0,0">

                                        <Button AutomationProperties.Name="Group Title"

                                                Content="{Binding CountryName}"

                                                Style="{StaticResource TextBlockButtonStyle}"

                                        />

                                    </Grid>

                                </DataTemplate>

                            </GroupStyle.HeaderTemplate>

                            <GroupStyle.Panel>

                                <ItemsPanelTemplate>

                                    <VariableSizedWrapGrid Orientation="Vertical" Margin="0,0,50,0" />

                                </ItemsPanelTemplate>

                            </GroupStyle.Panel>

                        </GroupStyle>

                    </GridView.GroupStyle>

                </GridView>

            </SemanticZoom.ZoomedInView>

            <SemanticZoom.ZoomedOutView>

                <GridView ItemsSource="{Binding Source={StaticResource  groupedItemsViewSource}}"

                          AutomationProperties.AutomationId="ItemGridView"

                          AutomationProperties.Name="Grouped Items"

                          ItemTemplate="{StaticResource MinimumItemTemplate}"

                          Margin="116,0,40,46">

                    <GridView.ItemsPanel>

                        <ItemsPanelTemplate>

                            <VirtualizingStackPanel Orientation="Horizontal"/>

                        </ItemsPanelTemplate>

                    </GridView.ItemsPanel>

                    <GridView.GroupStyle>

                        <GroupStyle>

                            <GroupStyle.HeaderTemplate>

                                <DataTemplate>

                                    <Grid Margin="20,0,0,0">

                                        <Button AutomationProperties.Name="Group Title"

                                                Content="{Binding CountryName}"

                                                Style="{StaticResource TextBlockButtonStyle}"

                                        />

                                    </Grid>

                                </DataTemplate>

                            </GroupStyle.HeaderTemplate>

                            <GroupStyle.Panel>

                                <ItemsPanelTemplate>

                                    <VariableSizedWrapGrid Orientation="Vertical" Margin="0,0,50,0" />

                                </ItemsPanelTemplate>

                            </GroupStyle.Panel>

                        </GroupStyle>

                    </GridView.GroupStyle>

                </GridView>

            </SemanticZoom.ZoomedOutView>

        </SemanticZoom>

    </Grid>

</Page>

DataTemplate

   <DataTemplate x:Key="Standard250x250ItemTemplate">

            <Grid Height="250" Width="250">

                <Grid.RowDefinitions>

                    <RowDefinition Height="190"/>

                    <RowDefinition Height="60"/>

                </Grid.RowDefinitions>

                <Border Background="{StaticResource ListViewItemCheckSelectingThemeBrush}" Grid.Row="0">

                    <Image Source="{Binding Image}" Stretch="UniformToFill" Margin="20"/>

                </Border>

                <StackPanel Grid.Row="1">

                    <TextBlock Text="{Binding FullName}" Margin="20"/>

                </StackPanel>

            </Grid>

        </DataTemplate>

        <DataTemplate x:Key="MinimumItemTemplate">

            <Grid Height="100" Width="100">

                <Grid.RowDefinitions>

                    <RowDefinition Height="80"/>

                    <RowDefinition Height="20"/>

                </Grid.RowDefinitions>

                <Border Background="{StaticResource ListViewItemCheckSelectingThemeBrush}" Grid.Row="0">

                    <Image Source="{Binding Image}" Stretch="UniformToFill" Margin="5"/>

                </Border>

                <StackPanel Grid.Row="1">

                    <TextBlock Text="{Binding FullName}" Margin="5"/>

                </StackPanel>

            </Grid>

        </DataTemplate>

Models

    public class Person

    {

        public string FullName { get; set; }

        public string Image { get; set; }

 

    }

    public class Country

    {

        public string CountryName { get; set; }

        public IList<Person> Persons { get; set; }

 

    }

 

Le service contient une méthode permettant de renvoyer une liste de pays , avec pour chaque quelques personnes .

 

ViewModel

public class CountryListViewModel 

    {

        public ObservableCollection<Country> Countries { get; set; }

 

        private CountryService countryService;

 

        public CountryListViewModel()

        {

            countryService = new CountryService();

            Countries = new ObservableCollection<Country>(countryService.All());

        }

    }

Et dans le code behind de la page il suffit de définir le DataContext

DataContext = new CountryListViewModel();

 

Pour dézoomer (ctrl + "-")

zoom1.png

 

Ressources

http://blog.loicrebours.fr/2012/05/13/developper-application-windows8-introduction/

http://www.jonathanantoine.com/2012/03/05/winjs-out-of-the-box-available-icons/


Repost 0
Published by Romagny13 - dans WinRT
commenter cet article
6 mai 2014 2 06 /05 /mai /2014 15:07

Je reprends le même exemple vu dans l'article précédent auquel j'ajoute un ViewModel contenant une propriété message que la vue associée affichera

 

Convention :

Pourquoi respecter cette convention ? parce que sinon Prism ne retrouvera pas ses petits icon_surprised.gif

 

-          Les Views sont dans un dossier « Views »

o   avec le namespace « *.Views »

o   et un nom de vue se terminant par « Page » (exemple HubPage)

-          Les ViewModels sont dans un dossier « ViewModels »

o   avec le namespace « *.ViewModels »

o   et un nom finissant par « ViewModel »

 

ViewModel

Je me contenterai d’afficher le message  dans la vue associée

    // ViewModel --> Microsoft.Practices.Prism.StoreApps 

    public class HelloViewModel :ViewModel 

    {

        public string Message { get; set; }

 

        public HelloViewModel()

        {

            Message = "Hello world";

        }

    }

 

App.xaml.cs

    sealed partial class App : MvvmAppBase 

    {

        public App()

        {

            this.InitializeComponent();

        }

 

        protected override Task OnLaunchApplication(LaunchActivatedEventArgs args)

        {

           NavigationService.Navigate("Hub", null);

           Window.Current.Activate();

           return Task.FromResult<object>(null);

        }

 

        protected override void OnInitialize(IActivatedEventArgs args)

        {

            base.OnInitialize(args);

          

 

            // 1 

            //ViewModelLocator.SetDefaultViewTypeToViewModelTypeResolver((viewType) => 

            //    {

            //        if (viewType == typeof(HubPage))

            //            return typeof(HelloViewModel);

            //        else

            //            return null;

            //    });

 

            // 2 Autre possibilité

            ViewModelLocator.Register(typeof(HubPage).ToString(),()=> new HelloViewModel());

 

            ViewModelLocator.SetDefaultViewModelFactory((viewModelType) =>

                {

                    return Activator.CreateInstance(viewModelType);

                });  

        }

    }

 

HubPage

Ne pas oublier d’ajouter dans la vue

Prism:ViewModelLocator.AutoWireViewModel="True"


<Prism:VisualStateAwarePage 

    x:Name="pageRoot" 

    x:Class="Shop.PrismWinRT.Views.HubPage" 

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 

    xmlns:local="using:Shop.PrismWinRT.Views"

    xmlns:common="using:Shop.PrismWinRT.Common"

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

     xmlns:Prism="using:Microsoft.Practices.Prism.StoreApps"

    Prism:ViewModelLocator.AutoWireViewModel="True"

    mc:Ignorable="d">

 

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

        <Grid.ChildrenTransitions>

            <TransitionCollection>

                <EntranceThemeTransition/>

            </TransitionCollection>

        </Grid.ChildrenTransitions>

        <Grid.RowDefinitions>

            <RowDefinition Height="140"/>

            <RowDefinition Height="140"/>

            <RowDefinition Height="*"/>

        </Grid.RowDefinitions>

 

        <Grid>

            <Grid.ColumnDefinitions>

                <ColumnDefinition Width="120"/>

                <ColumnDefinition Width="*"/>

            </Grid.ColumnDefinitions>

              <TextBlock x:Name="pageTitle"

                         Text="{StaticResource AppName}"

                         Style="{StaticResource HeaderTextBlockStyle}"

                         Grid.Column="1"

                         IsHitTestVisible="false"

                         TextWrapping="NoWrap"

                         VerticalAlignment="Bottom"

                         Margin="0,0,30,40"/>

        </Grid>

        <TextBlock Text="{Binding Message}"

                   Style="{StaticResource BodyTextBlockStyle}"

                   Grid.Row="1" Margin="150,40"

                  

                   />

 

    </Grid>

</Prism:VisualStateAwarePage>

 

 

helloprismwinrt

Repost 0
Published by Romagny13 - dans Prism for WinRT
commenter cet article
4 mai 2014 7 04 /05 /mai /2014 23:17
Repost 0
Published by Romagny13 - dans HTML5-CSS3
commenter cet article
4 mai 2014 7 04 /05 /mai /2014 17:54

http://wpftoolkit.codeplex.com/

 

BusyIndicator et ChildWindow

http://wpftoolkit.codeplex.com/wikipage?title=BusyIndicator
https://wpftoolkit.codeplex.com/wikipage?title=ChildWindow

 

Exemple simple, j’affiche une liste de villes et je permets l’édition de la ville courante dans une nouvelle fenêtre.

  •   BusyIndicator

mvvmprism3.png

  • ChilWindow

mvvmprism4.png



Namespace    xmlns:xctk=http://schemas.xceed.com/wpf/xaml/toolkit


  • BusyIndicator :je lie IsBusy à une propriété de mon ViewModel
  • ChildWindow : plusieurs propriétés intéressantes (caption,IsModal,WindowState,etc.)
  • Je lie l’état de la fenêtre (Open ou Closed) à une propriété de mon ViewModel
  • Pour la commande EditCityCommand, j’utilise RaiseCanExecuteChanged pour déclencher l'évaluation de la condition

<UserControl x:Class="Module1.Content1"

             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

             xmlns:xctk="http://schemas.xceed.com/wpf/xaml/toolkit"

             mc:Ignorable="d"

             d:DesignHeight="300" d:DesignWidth="300">

    <Grid >

        <Grid.RowDefinitions>

            <RowDefinition Height="3*"/>

            <RowDefinition />

        </Grid.RowDefinitions>

        <xctk:BusyIndicator BusyContent="Loading Cities ..." IsBusy="{Binding IsBusy}" Grid.Row="0">

            <ListBox ItemsSource="{Binding Cities}"

                     DisplayMemberPath="CityName"

                     SelectedItem="{Binding SelectedCity}"

                     IsSynchronizedWithCurrentItem="True"

                     Margin="10"/>

        </xctk:BusyIndicator>

        <Button Command="{Binding EditCityCommand}" Grid.Row="1" Content="Edit city" Margin="10"/>

 

        <xctk:ChildWindow Grid.Row="0" Caption="Edition ..." IsModal="True" WindowStartupLocation="Center" WindowState="{Binding WindowState}">

            <Grid>

                <TextBox Text="{Binding SelectedCity.CityName}" />

            </Grid>

        </xctk:ChildWindow>

    </Grid>

</UserControl>

 

ViewModel

 

public class Content1ViewModel : IContent1ViewModel,INotifyPropertyChanged

    {

        public DelegateCommand EditCityCommand { get; set; }

        public ObservableCollection<City> Cities { get; set; }

 

        private Xceed.Wpf.Toolkit.WindowState _windowState;

 

        public Xceed.Wpf.Toolkit.WindowState WindowState

        {

            get { return _windowState; }

            set

            {

                _windowState = value;

                RaisePropertyChanged();

            }

        }

        private bool _isBusy;

 

        public bool IsBusy

        {

            get { return _isBusy; }

            set

            {

                _isBusy = value;

                RaisePropertyChanged();

            }

        }

 

        private City _selectedCity;

 

        public City SelectedCity

        {

            get { return _selectedCity; }

            set

            {

                _selectedCity = value;

                EditCityCommand.RaiseCanExecuteChanged();

                RaisePropertyChanged();

            }

        }

 

        public IView View { get; set; }

 

        public Content1ViewModel(IContent1View view)

        {

            this.View = view;

            this.View.ViewModel = this;

            EditCityCommand = new DelegateCommand(()=>

                WindowState = WindowState = Xceed.Wpf.Toolkit.WindowState.Open,

                ()=>SelectedCity!=null);

 

            LoadCities();

 

        }

 

        public async void LoadCities()

        {

            IsBusy = true;

            Cities = new ObservableCollection<City>(await GetAllAsync());

            RaisePropertyChanged("Cities");

            IsBusy = false;

        }

        // simule un long chargement asynchrone,pour bien faire il faudrait utiliser un service voir un repository

        public async Task<IList<City>> GetAllAsync()

        {

            IList<City> cities = new List<City>();

            cities.Add(new City() { CityName = "Londres" });

            await Task.Delay(1000);

            cities.Add(new City() { CityName = "Berlin" });

 

            return cities;

        }

  

        protected void RaisePropertyChanged([CallerMemberName] string propertyName = null)

        {

            var handler = PropertyChanged;

            if (handler != null)

                handler(this, new PropertyChangedEventArgs(propertyName));

 

        }

        public event PropertyChangedEventHandler PropertyChanged;

    }

    public class City :INotifyPropertyChanged

    {

        private string _cityName;

 

        public string CityName

        {

            get { return _cityName; }

            set

            {

                _cityName = value;

                RaisePropertyChanged();

            }

        }

 

        protected void RaisePropertyChanged([CallerMemberName] string propertyName = null)

        {

            var handler = PropertyChanged;

            if (handler != null)

                handler(this, new PropertyChangedEventArgs(propertyName));

 

        }

        public event PropertyChangedEventHandler PropertyChanged;

    }

 

Repost 0
Published by Romagny13 - dans Prism
commenter cet article