none
Creando un control RRS feed

  • Pregunta

  • Hola a todos, comenzando con WPF me empiezan a surgir varias dudas que intentaré postear a ver si alguien es capaz de ayudarme.

    Estoy creando un control como el de la imagen siguiente, intentando hacer lo que sería un datagrid pero sin tanta complejidad, es decir, un contenedor donde pueda ir añadiendo mediante código, varios items con una forma personaliza (como si fuesen los datagridrows-filas). El problema me surge a la hora de crear el control, que no sé exactamente si el ideal para ello es un stackpanel o cual, por lo que necesitos algunos consejos. Así mismo, debería ser un control al que pueda añadir las filas.

    Así mismo, también me gustaría que me ayudasen con otra duda y es como puedo hacer que un textbox que está dentro del control personalizado, automáticamente se rellene con una de las propiedades de dicho textbox. Por si no me he explicado bien, es como lo que hace el propio textbox, que se rellena mediante el texto que se introduce dentro de la propiedad Text.

    La idea sería ir creando mediante código los items con determinadas propiedades, y éstos al añadirlo al contenedor, se autorellenen.

    La imagen del boceto sería la siguiente:

    http://img411.imageshack.us/i/control.gif/

     

    Gracias a todos y espero algunos consejos, saludos.

    • Editado Spaikers martes, 4 de enero de 2011 2:37 Añadir imagen.
    martes, 4 de enero de 2011 2:35

Todas las respuestas

  • Alguna ayuda?
    martes, 4 de enero de 2011 14:21
  • Hola Spaikers.

    Uff, esto si que se puede hacer de mil formas con WPF, de modo que te explico la que creo que es mas basica de todas.

    Se trata de usar un listBox y personalizar sus items (tambien puedes usar el listView para ello, de echo si se cambia el control ListBox por ListView, funciona de igual forma el ejemplo que te pongo).

    codigo xaml:

    <Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:WpfApplication1"    
        Title="MainWindow" Height="350" Width="525" 
        mc:Ignorable="d" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006">
      
      <Window.Resources>
        
        <!-- Plantilla de datos del listbox para personalizar la representacion -->
      	<DataTemplate x:Key="DataTemplate1">
          <!-- Border del item con el color de la columna 1 del modelo-->
      		<Border Height="{Binding ActualWidth, ElementName=textBlock, Mode=OneWay}" Padding="10" Margin="2" 
              Background="{Binding Column1}" >
      			<!-- Contenedor del item -->
      			<StackPanel Orientation="Horizontal">
      				<!-- Texto enlazado a la propiedad texto del elemento TextBox -->
      				<TextBlock TextWrapping="Wrap" Text="{Binding Text, ElementName=textBox}"/>
      				<!-- Texto enlazado al modelo -->
      				<TextBlock x:Name="textBlock" TextWrapping="Wrap" Text="{Binding Column2}" RenderTransformOrigin="0.5,0.5" Margin="5">
      					<TextBlock.RenderTransform>
      						<TransformGroup>
      							<ScaleTransform/>
      							<SkewTransform/>
      							<RotateTransform Angle="90"/>
      							<TranslateTransform/>
      						</TransformGroup>
      					</TextBlock.RenderTransform>
      				</TextBlock>
      				<!-- TextBox para insertar texto -->
      				<TextBox x:Name="textBox" TextWrapping="NoWrap" Background="Red" Text="insertar texto"/>
      				<!-- Texto enlazado al modelo -->
      				<TextBlock TextWrapping="Wrap" Text="{Binding Column4}"/>
      				<!-- Texto enlazado al modelo -->
      				<TextBlock TextWrapping="Wrap" Text="{Binding Column5}"/>
      			</StackPanel>
      		</Border>
      	</DataTemplate>
      </Window.Resources>
      
      <!-- Grid principal de la aplicacion -->
      <Grid DataContext="{Binding Source={StaticResource customersDataSource}}">
      	<Grid.RowDefinitions>
      		<RowDefinition/>
      		<RowDefinition Height="Auto"/>
      	</Grid.RowDefinitions>
        
        <!-- ListBox de ejemplo personalizado usando la plantilla de datos personalizada y un modelo como contexto para los datos -->
        <ListBox Name="sampleListBox" ItemTemplate="{DynamicResource DataTemplate1}" />
        
        <!-- Boton para añadir items -->
    		<Button Content="Añadir item nuevo" Grid.Row="1" Click="Button_Click" />
        
    	</Grid>
    </Window>
    
    

    En este codigo tan solo hay un listbox con una platilla de datos para sus items internos, lo interesante aqui es el dataTemplate, ya que es el que crea la plantilla visual para los datos que se vinculen (items), para los cuales uso una clase que define sus elementos como propiedades en el codigo .cs

    (la plantilla con Expression Blend, la puedes diseñar visual y facilmente)

     

    codigo c#:

    namespace WpfApplication1
    {
      /// <summary>
      /// Lógica de interacción para MainWindow.xaml
      /// </summary>
      public partial class MainWindow : Window
      {
        public MainWindow()
        {
          InitializeComponent();
        }
    
        /// <summary>
        /// Evento del boton para añadir items
        /// </summary>
        /// <param name="sender">objeto remitente</param>
        /// <param name="e">argumentos del evento</param>
        private void Button_Click(object sender, RoutedEventArgs e)
        {
          // crear un nuevo modelo
          rowItem item = new rowItem()
          {
            Column1 = new SolidColorBrush(Color.FromArgb(0xAA, 0x33, 0x55, (byte)(sampleListBox.Items.Count * 10))),
            Column2 = "columna 2",
            Column3 = "columna 3",
            Column4 = "columna 4",
            Column5 = "columna 5"
          };
    
          // añadir el item nuevo
          sampleListBox.Items.Add(item);
        }
      }
    
      /// <summary>
      /// Clase con el modelo que representa cada fila
      /// </summary>
      public class rowItem
      {
        public SolidColorBrush Column1 { get; set; }
        public string Column2 { get; set; }
        public string Column3 { get; set; }
        public string Column4 { get; set; }
        public string Column5 { get; set; }
      }
    
    }
    
    

     

    En el codigo .cs, tan solo defino una clase que sera el modelo de cada item con sus propiedades y un evento donde ire añadiendo items mediante programacion.

    Bueno, es un ejemplo sencillo, ya me comentaras si tienes algun problema

     


    Saludos
    David González
    MCP, MCTS
    Visita mi Blog en: http://www.dgzornoza.com/
    • Propuesto como respuesta CorsarioVasco martes, 4 de enero de 2011 20:34
    martes, 4 de enero de 2011 16:18