Left Alignement with wpf grid - silverlight

Question

In a WP7.5 application, i have a listbox containing a grid.
This grid contain two row, and two columns (2x2)
In grid, i display textbox, my problem is thar the alignement is bad ! I don't know why, i set horizontalAligement=true, but no change !
Here is my code :
<ListBox x:Name="ListBoxTiers" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="0">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch" VerticalAlignment="Top" >
<Grid Margin="20" VerticalAlignment="Top" HorizontalAlignment="Left">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Grid.Row="0" Grid.Column="0" Margin="0,0,10,0" x:Name="TxtBox_cCodeTiers" Text="{Binding m_strCode}" FontWeight="Bold" FontSize="22" />
<TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Grid.Row="0" Grid.Column="1" Margin="0,0,10,0" x:Name="TxtBox_cNomTiers" Text="{Binding m_strNom}" FontWeight="Bold" FontSize="22" />
<TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Grid.Row="1" Grid.ColumnSpan="2" Grid.Column="0" Margin="0,0,10,0" x:Name="TxtBox_cCPostal" Text="{Binding m_strFonction}" />
</Grid>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
Here is my result :
Here is my Class :
public class CTiers
{
public enum TypeTiers { Client, Fournisseur, Contact, Collaborateur, Commercial, Prospect};
TypeTiers m_TypeTiers { set; get; }
public string m_strTypeTiers { get; set; }
public string m_strCode { set; get; }
public string m_strNom { set; get; }
public string m_strPrenom { set; get; }
public string m_strTel { set; get; }
public string m_strGsm { set; get; }
public string m_strFax { set; get; }
public string m_strMail { set; get; }
public string m_strWebSite { set; get; }
public string m_strVille { set; get; }
public string m_strCpostal { set; get; }
public string m_strRue { set; get; }
public string m_strFonction { set; get; }
public CTiers()
{
}
public CTiers(TypeTiers oTypeTiers, string strCode, string strNom, string strPrenom, string strTel, string strGsm, string strFax, string strRue,string strVille,string strCPostal,string strMail,string strWebSite,string strFonction)
{
m_TypeTiers = oTypeTiers;
m_strCode = strCode.Trim();
m_strNom = strNom.Trim();
m_strPrenom = strPrenom.Trim();
m_strVille = strVille.Trim();
m_strTel = strTel.Trim();
m_strGsm = strGsm.Trim();
m_strFax = strFax.Trim();
m_strWebSite = strWebSite.Trim();
m_strRue = strRue.Trim();
m_strMail = strMail.Trim();
m_strCpostal = strCPostal.Trim();
m_strTypeTiers = oTypeTiers.ToString().Trim();
m_strFonction = strFonction.Trim();
}
}
Anyone could help me please ?
Thanks a lot :)
Best regards

Answer 1

Your code is ok, problem is with the text trimming only.
I used the same xaml in your question and did a sample.
Case 1: First I took all the strings trimmed
List<Myclass> list = new List<Myclass>();
list.Add(new Myclass() { m_strCode = "001", m_strNom = "sample1", m_strFonction = "Fonction1" });
list.Add(new Myclass() { m_strCode = "002", m_strNom = "sample2", m_strFonction = "Fonction2" });
list.Add(new Myclass() { m_strCode = "003", m_strNom = "sample3 ", m_strFonction = "Fonction3" });
list.Add(new Myclass() { m_strCode = "004", m_strNom = "sample4", m_strFonction = "Fonction4" });
list.Add(new Myclass() { m_strCode = "005", m_strNom = "sample5", m_strFonction = "Fonction5" });
ListBoxTiers.ItemsSource = list;
And the result is : (Formated clearly as you expect)
Case 2: In this case, I took some strings with extraa spaces (observe sample1 and 004)
List<Myclass> list = new List<Myclass>();
list.Add(new Myclass() { m_strCode = "001", m_strNom = " sample1", m_strFonction = "Fonction1" });
list.Add(new Myclass() { m_strCode = "002", m_strNom = "sample2", m_strFonction = "Fonction2" });
list.Add(new Myclass() { m_strCode = "003", m_strNom = "sample3 ", m_strFonction = "Fonction3" });
list.Add(new Myclass() { m_strCode = "004 ", m_strNom = "sample4", m_strFonction = "Fonction4" });
list.Add(new Myclass() { m_strCode = "005", m_strNom = "sample5", m_strFonction = "Fonction5" });
ListBoxTiers.ItemsSource = list;
And now the result is :
Hence, the problem is you are not properly trimming the text. Take care about that.
Update:
There you go. You don't always call the constructor for instantiating the object. So, the better way is this.
private string _m_strFonction;
private string _m_strNom;
private string _m_strCode;
public string m_strCode
{
get { return _m_strCode; }
set { _m_strCode = value.Trim(); }
}
public string m_strNom
{
get { return _m_strNom; }
set { _m_strNom = value.Trim(); }
}
public string m_strFonction
{
get { return _m_strFonction; }
set { _m_strFonction = value.Trim(); }
}

Answer 2

You're probably better off with a ListView rather than a ListBox. However, if you must use a ListBox, then the issue you're seeing is because every data item has it's own Grid. In other words, they are not sharing the same Columns. To circumvent this, add a width to each of the column definitions:
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
This will provide a common width for all the left columns and the right columns will all start at the same location as well. Assuming nothing in the left columns are wider than whatever is set as the Width.

Answer 3

I think that problem is with Margin in Grid and with text trimming.
Try with Margin set to "0, 20, 20, 20":
<ListBox x:Name="ListBoxTiers" ItemsSource="{Binding}"
HorizontalAlignment="Left" VerticalAlignment="Top" Margin="0"
>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch" VerticalAlignment="Top" >
<Grid Margin="0, 20, 20, 20" VerticalAlignment="Top" HorizontalAlignment="Left">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Grid.Row="0" Grid.Column="0" Margin="0,0,10,0" x:Name="TxtBox_cCodeTiers" Text="{Binding m_strCode}" FontWeight="Bold" FontSize="22" Loaded="TxtBlock_Loaded" />
<TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Grid.Row="0" Grid.Column="1" Margin="0,0,10,0" x:Name="TxtBox_cNomTiers" Text="{Binding m_strNom}" FontWeight="Bold" FontSize="22" Loaded="TxtBlock_Loaded" />
<TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Grid.Row="1" Grid.ColumnSpan="2" Grid.Column="0" Margin="0,0,10,0" x:Name="TxtBox_cCPostal" Text="{Binding m_strFonction}" Loaded="TxtBlock_Loaded" />
</Grid>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Trim text to improve alignment:
private void TxtBlock_Loaded(object sender, RoutedEventArgs e)
{
TextBlock tb = sender as TextBlock;
tb.Text = tb.Text.Trim();
}
If column contains data with constant width you can specify it in XAML:
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>