Hola a todos vuelvo a escribirles ahora sobre el uso del tabControl, realizaremos un ejemplo rápidamente donde mostraremos un grid con contactos como este:
Al momento de dar click en el botón de "Edit" nos mandará a la otra pestaña para editar los datos aquí no haremos el proceso de edición que si lo podemos hacer pero lo que queremos es visualizar el uso de tabControl nada mas.
Una cuestión interesante es que vamos a ver como cambiar de tabItem al dar doble click "MouseDobleClick" sobre el grid ya que ejecuta un evento y hace que el tabItem no se cambie y veremos la solución. Al momento de dar doble clic o clic en edit veremos algo así:
Ahora si comenzaremos con el diseño XAML quedaría de la siguiente forma:
<Grid>
<TabControl Height="287" HorizontalAlignment="Left" Margin="23,12,0,0" Name="tabControl1" VerticalAlignment="Top" Width="455">
<TabItem Header="tabItem1" Name="tabItem1">
<Grid>
<DataGrid AutoGenerateColumns="False" Height="168" HorizontalAlignment="Left" Margin="26,24,0,0" Name="dtgContactos" VerticalAlignment="Top" Width="402" MouseDoubleClick="dtgContactos_MouseDoubleClick">
<DataGrid.Columns>
<DataGridTextColumn Header="Name" Binding="{Binding Path=Name}" Width="*" IsReadOnly="True"></DataGridTextColumn>
<DataGridTextColumn Header="Phone" Binding="{Binding Path=Phone}" Width="*" IsReadOnly="True" ></DataGridTextColumn>
<DataGridTextColumn Header="Mail" Binding="{Binding Path=Mail}" Width="*" IsReadOnly="True" ></DataGridTextColumn>
</DataGrid.Columns>
</DataGrid>
<Button Content="Edit" Height="23" HorizontalAlignment="Left" Margin="355,221,0,0" Name="btnEdit" VerticalAlignment="Top" Width="75" Click="btnEdit_Click" />
</Grid>
</TabItem>
<TabItem Header="General Information" Name="tab2">
<Grid>
<Label Content="Name" Height="28" Name="lblName" Margin="23,33,341,193" />
<TextBox Height="23" HorizontalAlignment="Left" Margin="75,33,0,0" Name="txtName" VerticalAlignment="Top" Width="255" />
<Label Content="Phone" Height="28" Margin="23,67,341,159" Name="lblPhone" />
<TextBox Height="23" HorizontalAlignment="Left" Margin="75,67,0,0" Name="txtPhone" VerticalAlignment="Top" Width="126" />
<Label Content="State" Height="28" Margin="23,101,341,125" Name="lblState" />
<TextBox Height="23" HorizontalAlignment="Left" Margin="75,101,0,0" Name="txtState" VerticalAlignment="Top" Width="197" />
<Label Content="Mail" Height="28" Margin="23,135,341,91" Name="lblMail" />
<TextBox Height="23" HorizontalAlignment="Left" Margin="75,135,0,0" Name="txtEmail" VerticalAlignment="Top" Width="342" />
</Grid>
</TabItem>
</TabControl>
</Grid>
Ahí tenemos un tabControl con dos tabItems ahora como vamos a llenar el grid.para esto vamos a crear una clase que nos ayudara a lleanarlo:
public class Contactos2
{
private int _ContactoID;
public int ContactoID
{
get { return _ContactoID; }
set { _ContactoID = value; }
}
private string _Name;
public string Name
{
get { return _Name; }
set { _Name = value; }
}
private string _Phone;
public string Phone
{
get { return _Phone; }
set { _Phone = value; }
}
private string _Mail;
public string Mail
{
get { return _Mail; }
set { _Mail = value; }
}
private string _State;
public string State
{
get { return _State; }
set { _State = value; }
}
}
Bueno para llenarlo ya sabemos creamos una lista de tipo "List<Contactos>" y llenamos el datagrid por medio del ItemsSource creo que no hay problema ahora el código para que al momento de presionar el botón editar habrá la pestaña siguiente con la información el código sería el siguiente:
private void btnEdit_Click(object sender, RoutedEventArgs e)
{
if (this.dtgContactos.SelectedIndex != -1)
{
Contactos2 itemSelected = this.dtgContactos.SelectedItem as Contactos2;
this.txtName.Text = itemSelected.Name;
this.txtPhone.Text = itemSelected.Phone;
this.txtState.Text = itemSelected.State;
this.txtEmail.Text = itemSelected.Mail;
tabControl1.SelectedItem = tab2;
}
else
{
MessageBox.Show("Selected item, please", "CONTACTS");
}
}
De está manera si damos doble clic en el datagrid funcionará activando el siguiente evento del datagrid.
private void dtgContactos_MouseDoubleClick(object sender, MouseButtonEventArgs e)
{
if (this.dtgContactos.SelectedIndex != -1)
{
Contactos2 itemSelected = this.dtgContactos.SelectedItem as Contactos2;
this.txtName.Text = itemSelected.Name;
this.txtPhone.Text = itemSelected.Phone;
this.txtState.Text = itemSelected.State;
this.txtEmail.Text = itemSelected.Mail;
e.Handled = true;
tabControl1.SelectedItem = tab2;
}
else
{
MessageBox.Show("Selected item, please", "CONTACTS");
}
}
}
Si se fijan la unica diferencia entre el código del botón y el código del MouseDoubleClick es el e.Handled = true, sin está instrucción no nos enviaría a la pestaña ya que el datagrid ejecuta un evento al dar el doble clic que hace que el tabControl vuelva a ejecutarse y a seleccionarse el item. Dejen sus comentarios o dudas saludos.
Comentarios