Compartir a través de

Cómo: Establecer las propiedades de ancho de un elemento

Ejemplo

En este ejemplo se muestran los distintos comportamientos de representación de las cuatro propiedades de Windows Presentation Foundation (WPF) que están relacionadas con el ancho.

La clase FrameworkElement expone cuatro propiedades que describen las características de ancho de un elemento. Estas cuatro propiedades pueden generar conflictos y, en ese caso, el valor que tiene prioridad se determina de la manera siguiente: el valor de MinWidth tiene prioridad sobre el valor de MaxWidth, que a su vez tiene prioridad sobre el valor de Width. Una cuarta propiedad, ActualWidth, es de solo lectura y notifica el ancho real tal y como se determina por las interacciones con el proceso del diseño.

En los siguientes ejemplos de Extensible Application Markup Language (XAML) se dibuja un elemento Rectangle (rect1) como un elemento secundario de Canvas. Puede cambiar las propiedades de ancho de una clase Rectangle por medio de una serie de elementos ListBox que representan los valores de propiedad de MinWidth, MaxWidth y Width. De esta manera, la prioridad de cada propiedad se muestra visualmente.

<Canvas Height="200" MinWidth="200" Background="#b0c4de" VerticalAlignment="Top"  HorizontalAlignment="Center" Name="myCanvas">
    <Rectangle HorizontalAlignment="Center" Canvas.Top="50" Canvas.Left="50"  Name="rect1" Fill="#4682b4" Width="100" Height="100"/>
</Canvas>


...


    <TextBlock Grid.Row="1" Grid.Column="0" Margin="10,0,0,0" TextWrapping="Wrap">Set the Rectangle Width:</TextBlock>
    <ListBox Grid.Column="1" Grid.Row="1" Margin="10,0,0,0" Width="50" Height="50" SelectionChanged="changeWidth">
      <ListBoxItem>25</ListBoxItem>
      <ListBoxItem>50</ListBoxItem>
      <ListBoxItem>75</ListBoxItem>
      <ListBoxItem>100</ListBoxItem>
      <ListBoxItem>125</ListBoxItem>
      <ListBoxItem>150</ListBoxItem>
      <ListBoxItem>175</ListBoxItem>
      <ListBoxItem>200</ListBoxItem>
      <ListBoxItem>225</ListBoxItem>
      <ListBoxItem>250</ListBoxItem>
    </ListBox>

    <TextBlock Grid.Row="1" Grid.Column="2" Margin="10,0,0,0" TextWrapping="Wrap">Set the Rectangle MinWidth:</TextBlock>
    <ListBox Grid.Column="3" Grid.Row="1" Margin="10,0,0,0" Width="50" Height="50" SelectionChanged="changeMinWidth">
      <ListBoxItem>25</ListBoxItem>
      <ListBoxItem>50</ListBoxItem>
      <ListBoxItem>75</ListBoxItem>
      <ListBoxItem>100</ListBoxItem>
      <ListBoxItem>125</ListBoxItem>
      <ListBoxItem>150</ListBoxItem>
      <ListBoxItem>175</ListBoxItem>
      <ListBoxItem>200</ListBoxItem>
      <ListBoxItem>225</ListBoxItem>
      <ListBoxItem>250</ListBoxItem>
  </ListBox>      

    <TextBlock Grid.Row="1" Grid.Column="4" Margin="10,0,0,0" TextWrapping="Wrap">Set the Rectangle MaxWidth:</TextBlock>
    <ListBox Grid.Column="5" Grid.Row="1" Margin="10,0,0,0" Width="50" Height="50" SelectionChanged="changeMaxWidth">
      <ListBoxItem>25</ListBoxItem>
      <ListBoxItem>50</ListBoxItem>
      <ListBoxItem>75</ListBoxItem>
      <ListBoxItem>100</ListBoxItem>
      <ListBoxItem>125</ListBoxItem>
      <ListBoxItem>150</ListBoxItem>
      <ListBoxItem>175</ListBoxItem>
      <ListBoxItem>200</ListBoxItem>
      <ListBoxItem>225</ListBoxItem>
      <ListBoxItem>250</ListBoxItem>  
    </ListBox>

Los siguientes ejemplos de código subyacente permiten controlar los eventos que provoca el evento SelectionChanged. Cada método personalizado acepta la entrada de ListBox, analiza el valor como Double y aplica el valor a la propiedad relacionada con el ancho especificada. Los valores de ancho se convierten también en una cadena y se escriben en varios elementos TextBlock (la definición de esos elementos no se muestra en el código XAML seleccionado).

Private Sub changeWidth(ByVal sender As Object, ByVal args As SelectionChangedEventArgs)
    Dim li As ListBoxItem = CType(CType(sender, ListBox).SelectedItem, ListBoxItem)
    Dim sz1 As Double = Double.Parse(li.Content.ToString())
    rect1.Width = sz1
    rect1.UpdateLayout()
    txt1.Text = "ActualWidth is set to " + rect1.ActualWidth.ToString
    txt2.Text = "Width is set to " + rect1.Width.ToString
    txt3.Text = "MinWidth is set to " + rect1.MinWidth.ToString
    txt4.Text = "MaxWidth is set to " + rect1.MaxWidth.ToString
End Sub
Private Sub changeMinWidth(ByVal sender As Object, ByVal args As SelectionChangedEventArgs)

    Dim li As ListBoxItem = CType(CType(sender, ListBox).SelectedItem, ListBoxItem)
    Dim sz1 As Double = Double.Parse(li.Content.ToString())
    rect1.MinWidth = sz1
    rect1.UpdateLayout()
    txt1.Text = "ActualWidth is set to " + rect1.ActualWidth.ToString
    txt2.Text = "Width is set to " + rect1.Width.ToString
    txt3.Text = "MinWidth is set to " + rect1.MinWidth.ToString
    txt4.Text = "MaxWidth is set to " + rect1.MaxWidth.ToString
End Sub
Private Sub changeMaxWidth(ByVal sender As Object, ByVal args As SelectionChangedEventArgs)

    Dim li As ListBoxItem = CType(CType(sender, ListBox).SelectedItem, ListBoxItem)
    Dim sz1 As Double = Double.Parse(li.Content.ToString())
    rect1.MaxWidth = sz1
    rect1.UpdateLayout()
    txt1.Text = "ActualWidth is set to " + rect1.ActualWidth.ToString
    txt2.Text = "Width is set to " + rect1.Width.ToString
    txt3.Text = "MinWidth is set to " + rect1.MinWidth.ToString
    txt4.Text = "MaxWidth is set to " + rect1.MaxWidth.ToString
End Sub

private void changeWidth(object sender, SelectionChangedEventArgs args)
{
    ListBoxItem li = ((sender as ListBox).SelectedItem as ListBoxItem);
    Double sz1 = Double.Parse(li.Content.ToString());
    rect1.Width = sz1;
    rect1.UpdateLayout();
    txt1.Text = "ActualWidth is set to " + rect1.ActualWidth;
    txt2.Text = "Width is set to " + rect1.Width;
    txt3.Text = "MinWidth is set to " + rect1.MinWidth;
    txt4.Text = "MaxWidth is set to " + rect1.MaxWidth;
}
private void changeMinWidth(object sender, SelectionChangedEventArgs args)
{
    ListBoxItem li = ((sender as ListBox).SelectedItem as ListBoxItem);
    Double sz1 = Double.Parse(li.Content.ToString());
    rect1.MinWidth = sz1;
    rect1.UpdateLayout();
    txt1.Text = "ActualWidth is set to " + rect1.ActualWidth;
    txt2.Text = "Width is set to " + rect1.Width;
    txt3.Text = "MinWidth is set to " + rect1.MinWidth;
    txt4.Text = "MaxWidth is set to " + rect1.MaxWidth;
}
private void changeMaxWidth(object sender, SelectionChangedEventArgs args)
{
    ListBoxItem li = ((sender as ListBox).SelectedItem as ListBoxItem);
    Double sz1 = Double.Parse(li.Content.ToString());
    rect1.MaxWidth = sz1;
    rect1.UpdateLayout();
    txt1.Text = "ActualWidth is set to " + rect1.ActualWidth;
    txt2.Text = "Width is set to " + rect1.Width;
    txt3.Text = "MinWidth is set to " + rect1.MinWidth;
    txt4.Text = "MaxWidth is set to " + rect1.MaxWidth;
}

Para obtener el ejemplo completo, vea Width Properties Comparison Sample.

Vea también

Tareas

Cómo: Establecer las propiedades de alto de un elemento

Referencia

ListBox

FrameworkElement

ActualWidth

MaxWidth

MinWidth

Width

Conceptos

Información general sobre elementos Panel

Otros recursos

Ejemplo Width Properties Comparison

  • Last updated on