Databases
StackOverflow2013
Postsdbo
POHow to set different HorizontalAlignment to ListBoxItems
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to set different HorizontalAlignment to ListBoxItems
    primarykey
    data
    text
    <p>I posted <a href="https://stackoverflow.com/questions/15376982/how-to-create-different-itemspaneltemplate-for-a-listbox">a question</a> yesterday but I think I failed to explain it correctly. </p> <p>Let me try again. </p> <p>So this is my goal:</p> <p><img src="https://i.stack.imgur.com/3F4em.png" alt="enter image description here"></p> <p>The red speech bubble represents an incoming message, and the blue bubble an outgoing message. I can describe this more precisely with the following xaml code. Note that the following code is only an explanation of what I expect to get when my actual xaml code (with some DataTemplates) compiles (WPF will populates the data automatically for me, using the DataTemplates). :</p> <pre><code>&lt;ListBox&gt; &lt;ListBoxItem HorizontalAlignment="Right"&gt; &lt;Grid Background="Blue"&gt; &lt;TextBlock Text="Help me please!" FontSize="30"/&gt; &lt;/Grid&gt; &lt;/ListBoxItem&gt; &lt;ListBoxItem HorizontalAlignment="Left"&gt; &lt;Grid Background="Red"&gt; &lt;TextBlock Text="What do you want?" FontSize="30"/&gt; &lt;/Grid&gt; &lt;/ListBoxItem&gt; &lt;ListBoxItem HorizontalAlignment="Right"&gt; &lt;Grid Background="Blue"&gt; &lt;TextBlock Text="I want a ListBox" FontSize="30"/&gt; &lt;/Grid&gt; &lt;/ListBoxItem&gt; &lt;ListBoxItem HorizontalAlignment="Left"&gt; &lt;Grid Background="Red"&gt; &lt;TextBlock Text="Then?" FontSize="30"/&gt; &lt;/Grid&gt; &lt;/ListBoxItem&gt; &lt;ListBoxItem HorizontalAlignment="Right"&gt; &lt;Grid Background="Blue"&gt; &lt;TextBlock Text="But the Grid won't fill" FontSize="30"/&gt; &lt;/Grid&gt; &lt;/ListBoxItem&gt; &lt;/ListBox&gt; </code></pre> <p>In order to achive this, I wrote:</p> <pre><code>&lt;ListBox&gt; &lt;ListBox.ItemTemplate&gt; &lt;DataTemplate&gt; &lt;ListBoxItem&gt; &lt;Grid Background="{Binding Color}"&gt; &lt;TextBlock Text="{Binding Text}" FontSize="30"/&gt; &lt;/Grid&gt; &lt;/ListBoxItem&gt; &lt;/DataTemplate&gt; &lt;/ListBox.ItemTemplate&gt; &lt;/ListBox&gt; </code></pre> <p>Note that alignment is not specified in the code above, becuase I really don't know how to set different alignement for ListBoxItem separately using templates. So this would result in the situation where all the blue and red grids are all aligned to the left, by default. </p> <p>My first approach includes a Data Template selector (The template for incoming messages is omitted):</p> <pre><code>&lt;ListBox&gt; &lt;ListBox&gt; &lt;ListBox.ItemTemplate&gt; &lt;!-- local:MessageBubbleTemplateSelector.OutgoingMessageTemplate --&gt; &lt;DataTemplate&gt; &lt;ListBoxItem&gt; &lt;Grid&gt; &lt;Grid Background="{Binding Color}" HorizontalAlignment="Right"&gt; &lt;TextBlock Text="{Binding Text}" FontSize="30"/&gt; &lt;/Grid&gt; &lt;/Grid&gt; &lt;/ListBoxItem&gt; &lt;/DataTemplate&gt; &lt;/ListBox.ItemTemplate&gt; &lt;/ListBox&gt; &lt;/ListBox&gt; </code></pre> <p>But this did not work. Because the <code>Grid</code> which wraps the speech bubble won't expand automatically, so the alignment of the <code>Grid</code> inside this <code>Grid</code> did not matter (tightly fitted). </p> <p>And then I went for searching how to expand a <code>Grid</code> inside a <code>StackPanel</code>, and got no luck. </p> <p>After many hours of googling and trials and errors, I decided to define the template for the <code>ItemsPanelTemplate</code> myself. I have a property in my <code>Message</code> object that can help me tell an incoming message from an outgoing one. But I don't know how to create an <code>ItemsPanelTemplate</code> selector (For the record, Google told me that <code>Style.Trigger</code> is not supported in Windows Phone 8). </p> <p>So my question is: <em>how to set different HorizontalAlignment for</em> <code>ListBoxItems</code>?</p> <p>BTW, <code>ItemsPabelTemplate</code> looks like this:</p> <pre><code>&lt;ListBox.ItemsPanel&gt; &lt;ItemsPanelTemplate&gt; &lt;StackPanel /&gt; &lt;/ItemsPanelTemplate&gt; &lt;/ListBox.ItemsPanel&gt; </code></pre> <p>Thank you so much for your patience. I am madly desperate here already... So many hours wasted on this...</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USCommunity
    1. This table or related slice is empty.
    plurals
    1. PL
      singulars
      1. LTLinked
    1. PL
      singulars
      1. LTLinked
    2. PL
      singulars
      1. LTLinked
    3. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POHow to set different HorizontalAlignment to ListBoxItems
      1. This table or related slice is empty.
      1. VTUpMod
    1. COI'm having trouble understanding your comment "But the Grid won't fill". If you want the Grid to fill, you shouldn't be setting a horizontal alignment on it. You should be setting the horizontal alignment of the TextBlock instead! Also, one possible think-outside-the-box solution for you would be if: You had separate class definitions for Incoming and Outgoing messages. You then define 2 separate datatemplates that target each type. i.e. <DataTemplate TargetType={x:Type Namespace:IncomingMessageViewModel}">... and another one for OutgoingMessageViewModel. That should set the different layouts.
      singulars
      1. POHow to set different HorizontalAlignment to ListBoxItems
      1. USfailedprogramming
    2. COWhere you able to solve your problem?
      singulars
      1. POHow to set different HorizontalAlignment to ListBoxItems
      1. USWiiMaxx
    3. COif your where able to solve your problem by one of this Answers would you please so kind to mark it as answer or post your own solution
      singulars
      1. POHow to set different HorizontalAlignment to ListBoxItems
      1. USWiiMaxx
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload