使用wpf网格左对齐

时间:2013-01-20 18:23:13

标签: silverlight windows-phone-7 xaml

在WP7.5应用程序中,我有一个包含网格的列表框。 该网格包含两行和两列(2x2)

在网格中,我显示文本框,我的问题是对齐是坏的!我不知道为什么,我设置horizo​​ntalAligement = true,但没有变化!

这是我的代码:

<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>

这是我的结果:

enter image description here

这是我的班级:

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();
    }

}

有人可以帮我吗?

非常感谢:)

祝你好运

3 个答案:

答案 0 :(得分:2)

您的代码没问题,问题在于文本修剪。

我在你的问题中使用了相同的xaml并做了一个样本。

案例1:首先我修剪了所有琴弦

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;

结果是:(按照您的预期清晰地形成)

enter image description here

案例2:在这种情况下,我带了一些带有额外空格的字符串(观察样本1和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;

现在的结果是:

enter image description here

因此,问题是你没有正确修剪文本。小心一点。

更新

你去吧。您并不总是调用构造函数来实例化对象。所以,更好的方法就是这样。

    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(); }
    }

答案 1 :(得分:1)

我认为问题出在Margin中的Grid以及文本修剪。

尝试将Margin设置为"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>

修剪文字以改善对齐:

private void TxtBlock_Loaded(object sender, RoutedEventArgs e)
{
     TextBlock tb = sender as TextBlock;
     tb.Text = tb.Text.Trim();
}

如果列包含具有恒定宽度的数据,则可以在XAML中指定它:

<Grid.ColumnDefinitions>
       <ColumnDefinition Width="50" />
       <ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>

答案 2 :(得分:1)

使用ListView而不是ListBox可能会更好。但是,如果必须使用ListBox,那么您遇到的问题是因为每个数据项都有自己的Grid。换句话说,它们不共享相同的列。要避免这种情况,请为每个列定义添加一个宽度:

<Grid.ColumnDefinitions>
  <ColumnDefinition Width="100" />
  <ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>

这将为所有左列提供公共宽度,右列也将在同一位置开始。假设左列中的任何内容都不比设置为宽度的内容宽。