none
TextBox Stretch en un DataTemplate RRS feed

  • Pregunta

  • Hola a todos,

    estoy intentando que un TextBox ocupe todo el ancho dentro de un ListBox. Sin embargo, con la propiedad HorizontalAlignment="Strecth" no parece que esto se produzca cuando el textbox está dentro de un DataTemplate, en concreto de un ListBox.

    Aquí dejo un ejemplo, en el que se muestra como un TextBox fuera del ListBox ocupa todo el ancho de la página, mientras que dentro del DataTemplate no.

     

            <!--ContentPanel - place additional content here-->
            <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
                <Grid.RowDefinitions>
                    <RowDefinition />
                    <RowDefinition />
                </Grid.RowDefinitions>
                <TextBox Grid.Row="0" Height="72" HorizontalAlignment="Stretch" Margin="10,10,0,0" Name="textBox1" Text="Ejemplo" VerticalAlignment="Top"/>
                <ListBox Grid.Row="1" Height="100" HorizontalAlignment="Stretch" Margin="10,10,0,0" Name="listBox1" VerticalAlignment="Top" >
                    <sys:String>Ejemplo</sys:String>
                    <ListBox.ItemTemplate>
                        <DataTemplate>
                            <TextBox  Height="72" HorizontalAlignment="Stretch" Margin="10,10,0,0" Name="listTextBox1" Text="{Binding}" VerticalAlignment="Top"/>
                        </DataTemplate>
                    </ListBox.ItemTemplate>
                </ListBox>
            </Grid>

     

    ¿Hay alguna forma de que tome el ancho completo del ListBox? He intentado hacer un Binding en su propiedad Width a su TemplatedParent sin éxito.

    Muchas gracias.

     


    @ayus
    domingo, 13 de noviembre de 2011 17:10

Respuestas

  • Buenas de nuevo,

    os comento la solución por si le sirve de ayuda a alguien.

    En un principio pensé que sería posible adaptar el tamaño del TextBox al tamaño del ListBox mediante un Binding:

    <TextBox Width="{Binding ElementName=listBox1, Path=ActualWidth}" Height="72" HorizontalAlignment="Stretch" Margin="10,10,0,0" Name="listTextBox1" Text="{Binding}" VerticalAlignment="Top"/>
    

     Esto es correcto, sin embargo, cuando se cambia la orientación de la página, el ancho no se actualiza (a pesar de que si lo hace el ActualWidth del ListBox).

    Investigando un poco más, me he encontrado con este post en el foro de los en-US:

    http://social.msdn.microsoft.com/Forums/en-US/windowsphone7series/thread/d93281f3-d369-45b9-ae50-ce273941f959

    Al parecer es un bug existente en la CTP, aunque por lo que veo sigue existiendo en la versión 7.1

    La solución al problema pasa por configurar la plantilla del ListBoxItem dentro del ItemContainerStyle del ListBox de la siguiente forma:

                    <ListBox.ItemContainerStyle>
                        <Style TargetType="ListBoxItem">
                            <Setter Property="Template">
                                <Setter.Value>
                                    <ControlTemplate>
                                        <ContentPresenter HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
                                    </ControlTemplate>
                                </Setter.Value>
                            </Setter>
                        </Style>
                    </ListBox.ItemContainerStyle>

    De esta forma, ya se ajusta al ancho el Texbox independientemente de la orientación de la página.

    Salu2!

    PD: Quizá el título de la pregunta no debe hacer referencia al TextBox Stretch, si no al ListBox Stretch

     

    El código final quería:

    ...

    xmlns:sys="clr-namespace:System;assembly=mscorlib"
    

    ...

    <!--ContentPanel - place additional content here-->
            <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
                <Grid.RowDefinitions>
                    <RowDefinition />
                    <RowDefinition />
                </Grid.RowDefinitions>
                <TextBox Grid.Row="0" Height="72" HorizontalAlignment="Stretch" Margin="10,10,0,0" Name="textBox1" Text="Ejemplo" VerticalAlignment="Top"/>
                
                <ListBox Grid.Row="1" Height="100" HorizontalAlignment="Stretch" Margin="10,10,10,10" Name="listBox1" VerticalAlignment="Top" >
                    <sys:String>Ejemplo</sys:String>
                    <ListBox.ItemTemplate>
                        <DataTemplate>
                            <TextBox  Height="72" HorizontalAlignment="Stretch" Margin="10,10,0,0" Name="listTextBox1" Text="{Binding}" VerticalAlignment="Top"/>
                        </DataTemplate>
                    </ListBox.ItemTemplate>
                    <ListBox.ItemContainerStyle>
                        <Style TargetType="ListBoxItem">
                            <Setter Property="Template">
                                <Setter.Value>
                                    <ControlTemplate>
                                        <ContentPresenter HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
                                    </ControlTemplate>
                                </Setter.Value>
                            </Setter>
                        </Style>
                    </ListBox.ItemContainerStyle>
                </ListBox>
            </Grid>
    

     


    @ayus

    martes, 15 de noviembre de 2011 23:02