c# - Rejilla en el teléfono de Windows 7

windows-phone-7 isolatedstorage

Question

Tengo un código de vista de cuadrícula debajo que se ha dividido en 3 columnas . Pero tengo un problema con el código es eso. Cuando se recuperan datos múltiples Todos los datos en la columna 3 se superponen. ¿Cómo puedo modificar el siguiente código tal como se mostrará uno debajo de otro debajo de él.

 //Define grid column, size
Grid schedule = new Grid();
foreach (var time in timeSplit)
{
timeList = time;
//Column 1 to hold the time of the schedule
ColumnDefinition scheduleTimeColumn = new ColumnDefinition();
GridLength timeGrid = new GridLength(110);
scheduleTimeColumn.Width = timeGrid;
schedule.ColumnDefinitions.Add(scheduleTimeColumn);
//Text block that show the time of the schedule
TextBlock timeTxtBlock = new TextBlock();
timeTxtBlock.Text = time;
//Set the alarm label text block properties - margin, fontsize
timeTxtBlock.FontSize = 28;
timeTxtBlock.Margin = new Thickness(0, 20, 0, 0);
//Set the column that will hold the time of the schedule
Grid.SetColumn(timeTxtBlock, 0);
schedule.Children.Add(timeTxtBlock);
}
foreach (var title in titleSplit)
{
titleList = title;
//Column 2 to hold the title of the schedule
ColumnDefinition scheduleTitleColumn = new ColumnDefinition();
GridLength titleGrid = new GridLength(500);
scheduleTitleColumn.Width = titleGrid;
schedule.ColumnDefinitions.Add(scheduleTitleColumn);
//Text block that show the title of the schedule
TextBlock titleTxtBlock = new TextBlock();
if (title.Length > 10)
{
string strTitle = title.Substring(0, 10) + "....";
titleTxtBlock.Text = strTitle;
}
else
{
titleTxtBlock.Text = title;
}
//Set the alarm label text block properties - margin, fontsize
titleTxtBlock.FontSize = 28;
titleTxtBlock.Margin = new Thickness(60, 20, 0, 0);
//Set the column that will hold the title of the schedule
Grid.SetColumn(titleTxtBlock, 1);
schedule.Children.Add(titleTxtBlock);
//scheduleListBox.Items.Add(schedule);
}
foreach (var category in categorySplit)
{
categoryList = category;
//Column 3 to hold the image category of the schedule
ColumnDefinition categoryImageColumn = new ColumnDefinition();
GridLength catImgnGrid = new GridLength(70);
categoryImageColumn.Width = catImgnGrid;
schedule.ColumnDefinitions.Add(categoryImageColumn);
TextBlock categoryTxtBlock = new TextBlock();
categoryTxtBlock.Text = category;
//set the category image and its properties - margin, width, height, name, background, font size
Image categoryImage = new Image();
categoryImage.Margin = new Thickness(-50, 15, 0, 0);
categoryImage.Width = 50;
categoryImage.Height = 50;
if (category == "Priority")
{
categoryImage.Source = new BitmapImage(new Uri("/AlarmClock;component/Images/exclamination_mark.png", UriKind.Relative));
}
else
if (category == "Favourite")
{
categoryImage.Source = new BitmapImage(new Uri("/AlarmClock;component/Images/star_full.png", UriKind.Relative));
}
Grid.SetColumn(categoryImage, 2);
schedule.Children.Add(categoryImage);
}
scheduleListBox.Items.Add(schedule);
}

Answer 1

Debe colocar un StackPanel en cada columna y agregar los elementos a StackPanels en lugar de a la grilla.

Answer 2

La respuesta de Quickhorn es en su mayoría correcta. El problema es que estás creando una grilla grande en lugar de una fila para cada elemento de la lista. Aquí hay un ejemplo simplificado de su código que usa un objeto modelo y un enlace de datos en su lugar.

De esta manera, puedes diseñar todo en el xaml fácilmente y hace las cosas mucho más simples.

Código detrás: MainPage.xaml.cs

public partial class MainPage : PhoneApplicationPage
{
private ObservableCollection<Schedule> _schedules;
public MainPage()
{
InitializeComponent();
string[] timeSplit = new string[] { "One1", "Two2", "Three3" };
string[] titleSplit = new string[] { "Title1", "Title2", "Title3" };
string[] categorySplit = new string[] { "Priority", "Favourite", "Another" };
_schedules = new ObservableCollection<Schedule>();
for ( int i = 0; i < timeSplit.Length; i++ )
{
_schedules.Add( CreateSchedule( timeSplit[i], titleSplit[i], categorySplit[i] ) );
}
scheduleListBox.ItemsSource = _schedules;
}
private Schedule CreateSchedule( string time, string title, string category )
{
Schedule schedule = new Schedule
{
Time = time,
Title = title,
Category = category
};
if ( category == "Priority" )
{
schedule.ImageSource = "/AlarmClock;component/Images/exclamination_mark.png";
}
else if ( category == "Favourite" )
{
schedule.ImageSource = "/AlarmClock;component/Images/star_full.png";
}
return schedule;
}
}
public class Schedule
{
public string Time { get; set; }
public string Title { get; set; }
public string Category { get; set; }
public string ImageSource { get; set; }
}

MainPage.xaml

<ListBox
x:Name="scheduleListBox">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<TextBlock
Text="{Binding Time}"/>
<TextBlock
Text="{Binding Title}"
Grid.Column="1"/>
<StackPanel
Orientation="Horizontal"
Grid.Column="2">
<TextBlock
Text="{Binding Category}"/>
<Image
Source="{Binding ImageSource}"/>
</StackPanel>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>

Answer 3

Puede agregar columnas adicionales a la cuadrícula cuando hay más de 3 valores.

Podría ser mejor usar otro control para mantener los datos para que sea más obvio para el usuario dónde desplazarse, para ver más.

Primero piense en un diseño, luego hágalo (y pida ayuda)

Answer 4

Sin embargo, un panel de pila tendría sus elementos mostrados uno encima del otro, puede perder relaciones entre las 3 columnas. También podría simplemente configurar grid.row en un índice.

 int i = 0;
foreach (var title in titleSpan)
{
{...}
Grid.SetColumn(titleTxtBlock, 1);
Grid.SetRow(titleTxtBlock, i);
schedule.Children.Add(titleTxtBlock);
}

Hazlo para cada uno de tus bucles for y mantendrás la relación entre los elementos. Si no hay una relación entre sus elementos (es decir, el primer título no está relacionado con la primera categoría que no está relacionado con la primera vez) entonces es probable que un panel de distribución sea la mejor manera de hacerlo.