locked
comment entourer une image avec du texte en silverlight / wp7? RRS feed

  • Question

  • Bonjour,

     

    Je bute actuellement sur un problème de présentation... Une image étant plus parlante que des mots, voici le genre de chose que j'aimerais pouvoir obtenir :

     

    Je voudrais arriver au même résultat avec une solution générique puisque Image et TextBlock peuvent être bindées, mais je ne vois pas comment y arriver… Y a t-il des objets ou des propriétés dédiés à ce type de chose ? Faut-il développer un UserControl qui générera 2 textblocks au lieu d’un ?

    Merci d'avance !

    mercredi 6 avril 2011 12:03

Réponses

  • Bonjour je viens de faire un petit exemple. Il est loin d'arriver au résultat final ou d'être parfait. Mais c'est pour montrer un exemple de ce que l'on peut faire :

    On crée une classe qui hérite de ContentControl :

    public class ImageTextBlock : ContentControl
      {
    
    
        public String ImageSource
        {
          get { return (String)GetValue(ImageSourceProperty); }
          set { SetValue(ImageSourceProperty, value); }
        }
    
        // Using a DependencyProperty as the backing store for ImageSource. This enables animation, styling, binding, etc...
        public static readonly DependencyProperty ImageSourceProperty =
          DependencyProperty.Register("ImageSource", typeof(String), typeof(ImageTextBlock), new PropertyMetadata(String.Empty));
    
    
    
    
        public String TextRight
        {
          get { return (String)GetValue(TextRightProperty); }
          set { SetValue(TextRightProperty, value); }
        }
    
        // Using a DependencyProperty as the backing store for TextRight. This enables animation, styling, binding, etc...
        public static readonly DependencyProperty TextRightProperty =
          DependencyProperty.Register("TextRight", typeof(String), typeof(ImageTextBlock), new PropertyMetadata(null));
    
        
    
    
        public ImageTextBlock()
        {
          this.DataContext = this;
        }
      }

     

    <Style x:Key="ButtonStyle1" TargetType="local:ImageTextBlock">
            <Setter Property="Template">
              <Setter.Value>
                <ControlTemplate TargetType="local:ImageTextBlock">
                  <Grid>
                    <Grid.ColumnDefinitions>
                      <ColumnDefinition Width="Auto"/>
                      <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                      <RowDefinition Height="Auto"/>
                      <RowDefinition Height="*"/>
                    </Grid.RowDefinitions>
                    <Image Grid.Column="0" Grid.Row="0" Source="{Binding Path=ImageSource}" MinWidth="32"/>
                    <TextBlock TextWrapping="Wrap" Text="{Binding Path=TextRight}" Grid.Row="0" Grid.Column="1" Grid.RowSpan="2"/>
                    <TextBlock Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" Text="{Binding Path=Content}" TextWrapping="Wrap" />
                  </Grid>
                </ControlTemplate>
              </Setter.Value>
            </Setter>
          </Style>

     

    <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
          <!--<Image Source="Background.png" Width="32"/>-->
          <local:ImageTextBlock Content="testqfjsjhjhqsjkhqsjhkjhqshfsqfhqskhqskhqshqskqhskjqshqshjqsh" ImageSource="Background.png" 
                     TextRight="fjkqhjqhkjqhjkqhskjqhsjqhsjhqshjqskhqsjshq" Style="{StaticResource ButtonStyle1}"/>
        </Grid>
    mardi 12 avril 2011 20:13

Toutes les réponses

  • Bonjour,

     

    Pour obtenir le résultat désiré, vous pouvez utiliser le contrôle RichTextBox, qui vous permet d’utiliser du texte et des images. Voici deux présentations qui expliquent comment utiliser ce contrôle :

    http://johnpapa.net/silverlight/diving-into-the-richtextbox-silverlight-tv-31/

    http://www.silverlightshow.net/items/Working-with-the-Silverlight-Rich-Text-Box-control.aspx

     

    Cordialement,

    Alex

    ________________

    Publiez un article sur MSDN !

    Windows Phone 7

    Astuces pour Visual Studio 2010

    XNA – Développement jeux vidéo

    Didacticiels et astuces : VB.NET, C#, ASP.NET, .NET Framework, Silverlight, Workflow Foundation, SharePoint, WPF

    Microsoft propose ce service gratuitement, dans le but d'aider les utilisateurs et d'élargir les connaissances générales liées aux produits et technologies Microsoft. Ce contenu est fourni "tel quel" et il n'implique aucune responsabilité de la part de Microsoft.

     


    Suivez MSDN sur Twitter 

    mercredi 6 avril 2011 12:52
  • Bonjour,

    Je ne suis pas certain à 100% mais si je ne me trompe pas. il n'y a pas de RichtextBox fournis par Microsoft our par le ToolKit sur Windows Phone7.

    Sinon peut être que tu peux redéfinir le Controltemplate d'un textBlock pour y ajouter un image. (je dis cela sans avoir tester dans ton cas)

    Mais de toute façon je pense qu' il te faudra créer un nouveau controle.

     

     


    Cordialement, Pascal.
    mercredi 6 avril 2011 13:30
  • Bonjour, Sébastien,

    Avez-vous trouvé une solution pour votre problème ? Si oui, pouvez-vous la partager avec nous ?  

    Merci !

    Cipri


    Suivez MSDN sur Twitter   Suivez MSDN sur Facebook


    Ciprian DUDUIALA, MSFT  
    •Nous vous prions de considérer que dans le cadre de ce forum on n’offre pas de support technique et aucune garantie de la part de Microsoft ne peut être offerte.

    mardi 12 avril 2011 06:38
  • Bonjour,

    Je n'ai pas eu le temps de me pencher vraiment sur la question, mais j'ai vu que le contrôle WebBrowser supportait l'affichage de html généré dans le code. Etant donné le formatage relativement simple de ce que je souhaite obtenir,  je pense donc que je vais utiliser ce contrôle pour mon affichage.

     

    @Alex Petrescu : Effectivement, comme le mentionne Pascal, le contrôle RichTextBox n'est pas disponible sur WP7... A moins que je ne sois aveugle, évidemment ;-) 

    @Pascal Saille : L'idée a retenu mon attention, mais la redéfinition de ControlTemplate est encore dans ma liste des "to learn". Je le tententerai à l'occasion, lorsque j'aurai un peu de temps devant moi.

    Merci !



    mardi 12 avril 2011 15:29
  • Bonjour je viens de faire un petit exemple. Il est loin d'arriver au résultat final ou d'être parfait. Mais c'est pour montrer un exemple de ce que l'on peut faire :

    On crée une classe qui hérite de ContentControl :

    public class ImageTextBlock : ContentControl
      {
    
    
        public String ImageSource
        {
          get { return (String)GetValue(ImageSourceProperty); }
          set { SetValue(ImageSourceProperty, value); }
        }
    
        // Using a DependencyProperty as the backing store for ImageSource. This enables animation, styling, binding, etc...
        public static readonly DependencyProperty ImageSourceProperty =
          DependencyProperty.Register("ImageSource", typeof(String), typeof(ImageTextBlock), new PropertyMetadata(String.Empty));
    
    
    
    
        public String TextRight
        {
          get { return (String)GetValue(TextRightProperty); }
          set { SetValue(TextRightProperty, value); }
        }
    
        // Using a DependencyProperty as the backing store for TextRight. This enables animation, styling, binding, etc...
        public static readonly DependencyProperty TextRightProperty =
          DependencyProperty.Register("TextRight", typeof(String), typeof(ImageTextBlock), new PropertyMetadata(null));
    
        
    
    
        public ImageTextBlock()
        {
          this.DataContext = this;
        }
      }

     

    <Style x:Key="ButtonStyle1" TargetType="local:ImageTextBlock">
            <Setter Property="Template">
              <Setter.Value>
                <ControlTemplate TargetType="local:ImageTextBlock">
                  <Grid>
                    <Grid.ColumnDefinitions>
                      <ColumnDefinition Width="Auto"/>
                      <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                      <RowDefinition Height="Auto"/>
                      <RowDefinition Height="*"/>
                    </Grid.RowDefinitions>
                    <Image Grid.Column="0" Grid.Row="0" Source="{Binding Path=ImageSource}" MinWidth="32"/>
                    <TextBlock TextWrapping="Wrap" Text="{Binding Path=TextRight}" Grid.Row="0" Grid.Column="1" Grid.RowSpan="2"/>
                    <TextBlock Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" Text="{Binding Path=Content}" TextWrapping="Wrap" />
                  </Grid>
                </ControlTemplate>
              </Setter.Value>
            </Setter>
          </Style>

     

    <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
          <!--<Image Source="Background.png" Width="32"/>-->
          <local:ImageTextBlock Content="testqfjsjhjhqsjkhqsjhkjhqshfsqfhqskhqskhqshqskqhskjqshqshjqsh" ImageSource="Background.png" 
                     TextRight="fjkqhjqhkjqhjkqhskjqhsjqhsjhqshjqskhqsjshq" Style="{StaticResource ButtonStyle1}"/>
        </Grid>
    mardi 12 avril 2011 20:13
  • Je continue sur un autre post car j'ai eu du mal à garder la mise en forme ^^

    Donc cette exemple est loin d'être parfait, mais c'est un point de départ pour tester quelques possibilités.


    Cordialement, Pascal.

    Développeur Wpf/SilverLight/WinPhone7

    • Proposé comme réponse Pascal Saille mercredi 13 avril 2011 18:33
    mardi 12 avril 2011 20:31
  • Bonjour,

    Merci beaucoup pour l'exemple. Je vois à peu près l'idée finale du truc. Le must serait ensuite que je génère dans la classe ImageTextBlock les différents blocks nécessaires à un affichage propre et rapide via binding. Je creuserai ça avec plaisir, maintenant que j'ai les bases ;-)

    Merci !

    mercredi 13 avril 2011 08:41