[WinRT] Popup Everywhere

Tags:
apr 28, 2013 1:27 pm by Julien

Lorsqu'on développe sous WinRT, il arrive fréquemment de vouloir afficher une popup lorsque l'utilisateur effectue un click sur un bouton.

Pour un projet j'avais besoin d'afficher du contenu simple (juste une string) ou alors du contenu un peu plus graphique (un usercontrol)

Le but était d'avoir un contrôle réutilisable et qui ressemble à ce que l'on peut retrouver dans l'application "News" (le petit bouton sur une image qui affiche une info supplémentaire sur la photo)

 

j'ai crée un petit controle "TogglePopup" permettant d'afficher une popup. Le button peut être un Toggle ou pas, on peut spécifier l'endroit où sera affiché la popup (Droite, gauche, haut ,bas du button), on peut changer le Style du button, utiliser ou pas des animations etc ... 

Le contrôle est loin d'être parfait mais il pourra en aider certains je pense :D

Pour l'utiliser c'est du XAML only : 

Pour la version simple avec juste du contenu basic :

<local:TogglePopup HorizontalAlignment="Center" IsLightDismissEnabled="False" PopupPlacement="Above"
                                VerticalAlignment="Center" ButtonStyle="{StaticResource RoundButtonStyle}"
                                PopupContent="Les médecins avec des ordinateurs. Corbis" />

 

Pour la versio navec du contenu plus graphique : 

<local:TogglePopup HorizontalAlignment="Center"
                                PopupPadding="0"
                                Grid.Column="1"
                                PopupPlacement="Right"
                                ButtonStyle="{StaticResource RRoundButtonStyle}"
                                VerticalAlignment="Center">
            <local:TogglePopup.PopupContent>
                <Grid Width="300">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"></RowDefinition>
                        <RowDefinition></RowDefinition>
                    </Grid.RowDefinitions>
                    <Grid Background="SteelBlue">
                        <TextBlock FontSize="16"
                                   Text="LOREM IPSUM DOLOR"
                                   Margin="12 6"></TextBlock>
                    </Grid>
                    <Grid Grid.Row="1">
                        <TextBlock TextWrapping="Wrap" Margin="12 6">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras commodo lectus ac nibh mattis eget viverra dui accumsan.
                            Sed a erat massa. Integer eu velit non sem mattis condimentum. Aenean eu felis vitae mi malesuada tincidunt. 
                            Pellentesque scelerisque, erat non vehicula egestas, leo nisi cursus augue, eu rhoncus metus libero tincidunt elit. 
                            Integer odio erat, adipiscing nec pulvinar ac, faucibus tempor dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                            
                            Duis euismod cursus arcu vel pretium. Donec tincidunt consectetur mauris, eget blandit velit rutrum eget. 
                            Sed pulvinar odio in purus placerat porta. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. 
                            Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; 
                            Nam ac magna molestie neque tincidunt dapibus sed a arcu. Sed sodales odio quis sem condimentum in cursus metus pretium. 
                            Donec placerat auctor eros, sit amet iaculis tortor cursus nec. Donec volutpat risus non lorem sollicitudin laoreet tempus 
                            lorem sollicitudin. Donec adipiscing sollicitudin egestas.
                        </TextBlock>
                    </Grid>
                </Grid>
            </local:TogglePopup.PopupContent>
        </local:TogglePopup>


Le résultat en vidéo !

 

TogglePopup.rar (203.97 kb)

Add comment

  Country flag

biuquote
  • Comment
  • Preview
Loading