I am trying to produce a layout that will show me a grid of images which would respond to user clicks. The expected layout would be one of
Image 1 Image 2 Image 3
Image 4 Image 5 Image 6
Image 7 Image 8 Image 9
My current XAML layout is
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,10,10,10">
<ListBox x:Name="PreviewListBox"
HorizontalAlignment="Left"
Margin="2,10,0,10"
Width="446">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<toolkit:WrapPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<Grid HorizontalAlignment="Center">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="120"/>
</Grid.ColumnDefinitions>
<Image Source="{Binding Path=firstImgUrl}"
HorizontalAlignment="Center"
/>
<TextBlock Text="{Binding Path=firstImgTitle}"
HorizontalAlignment="Center"
/>
<Image Source="{Binding Path=secondImgUrl}"
HorizontalAlignment="Center"
/>
<TextBlock Text="{Binding Path=secondImgTitle}"
HorizontalAlignment="Center"
/>
<Image Source="{Binding Path=thirdImgUrl}"
HorizontalAlignment="Center"
/>
<TextBlock Text="{Binding Path=thirdImgTitle}"
HorizontalAlignment="Center"
/>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
At present it seems that the only items that are being shown are the lastly inserted items to the List item source.
I am not exactly sure why you are trying to show 3 images at one time in a grid but if you dont add rows for each item they are just going to display on top of each other.
First you have to define three(3) rows and three(3) column in your grid. Then for each image your specify the column and row it should be in.
like this
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,10,10,10">
<ListBox x:Name="PreviewListBox"
HorizontalAlignment="Left"
Margin="2,10,0,10"
Width="446">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<toolkit:WrapPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<Grid HorizontalAlignment="Center">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Image Source="{Binding Path=firstImgUrl}"
HorizontalAlignment="Center"
Grid.Row="0" Grid.Column="1"/>
<TextBlock Text="{Binding Path=firstImgTitle}"
HorizontalAlignment="Center"
Grid.Row="0" Grid.Column="1"
/>
<Image Source="{Binding Path=secondImgUrl}"
HorizontalAlignment="Center"
Grid.Row="0" Grid.Column="2"
/>
<TextBlock Text="{Binding Path=secondImgTitle}"
HorizontalAlignment="Center"
Grid.Row="0" Grid.Column="2"
/>
<Image Source="{Binding Path=thirdImgUrl}"
HorizontalAlignment="Center"
Grid.Row="0" Grid.Column="3"
/>
<TextBlock Text="{Binding Path=thirdImgTitle}"
HorizontalAlignment="Center"
Grid.Row="0" Grid.Column="3"
/>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
Related
I'd like to put a grid into the first item of my listbox, i dont just need a setter to change property but an entire grid (need add a headband with button and text).
I've serached a while...
I tried to put two listbox and "combine it" but it is not clean and it's make the ui bad.
<ListBox Style="{DynamicResource MaterialDesignListBox}"
x:Name="first" Visibility="Visible"
ScrollViewer.HorizontalScrollBarVisibility="Auto"
ScrollViewer.VerticalScrollBarVisibility="Disabled"
VerticalAlignment="Stretch" HorizontalAlignment="Stretch"
HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch"
Grid.Row="1" BorderThickness="0" MouseDoubleClick="LessonList_MouseDoubleClick"
Background="{StaticResource Secondary}" ItemsSource="{Binding FirstLesson}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<!-- <Border Margin="10" Height="160" BorderBrush="DodgerBlue" BorderThickness="1"> -->
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="249*"></RowDefinition>
<RowDefinition Height="22*"></RowDefinition>
<RowDefinition Height="25*"></RowDefinition>
<RowDefinition Height="25*"></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Image Source="{Binding thumbnail}" Grid.Row="0" RenderOptions.BitmapScalingMode="HighQuality"></Image>
<Viewbox Grid.Row="2">
<TextBlock TextWrapping="Wrap" Foreground="{StaticResource Txt}" Text="{Binding title}"/>
</Viewbox>
<Viewbox Grid.Row="3">
<TextBlock TextWrapping="Wrap" Foreground="{StaticResource Txt}" Text="{Binding style}"/>
</Viewbox>
</Grid>
<!-- </Border> -->
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel></WrapPanel>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ListBox>
<ListBox Style="{DynamicResource MaterialDesignListBox}"
Visibility="Visible"
ScrollViewer.HorizontalScrollBarVisibility="Auto"
ScrollViewer.VerticalScrollBarVisibility="Disabled"
VerticalAlignment="Stretch" HorizontalAlignment="Stretch"
HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch"
Grid.ColumnSpan="2" Grid.Row="1" BorderThickness="0"
x:Name="LessonList" MouseDoubleClick="LessonList_MouseDoubleClick"
Background="{StaticResource Secondary}" ItemsSource="{Binding lessonss}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<!-- <Border Margin="10" Height="160" BorderBrush="DodgerBlue" BorderThickness="1"> -->
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="249*"></RowDefinition>
<RowDefinition Height="22*"></RowDefinition>
<RowDefinition Height="25*"></RowDefinition>
<RowDefinition Height="25*"></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Image Source="{Binding thumbnail}" Grid.Row="0" RenderOptions.BitmapScalingMode="HighQuality"></Image>
<Viewbox Grid.Row="2">
<TextBlock TextWrapping="Wrap" Foreground="{StaticResource Txt}" Text="{Binding title}"/>
</Viewbox>
<Viewbox Grid.Row="3">
<TextBlock TextWrapping="Wrap" Foreground="{StaticResource Txt}" Text="{Binding style}"/>
</Viewbox>
</Grid>
<!-- </Border> -->
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel></WrapPanel>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ListBox>
I tried to make a grid inside the grid and make it visible only on first item but the grid is not detected because the grid is to "deep".
I've found this post : How to have first item bolded in ListBox?
But i dont think it is usefull because grid isn't a property.
I don't know what to try now.
Thanks !
Ive got an issue with the overall formatting for my GridView.
I am trying to get it to format in nice squares. im not sure of their exact width / height as yet.
The issue im having is my current XAML and C# code produces the following result:
Please excuse the terrible formatting for the text, i appreciate its not the best looks wise.
What im trying to get is for the information to come up as follows. Ive had to hand draw this because I literally cant put it into code, I also need these square to not overlap with the navigation view menu button which they keep doing currently. I was looking at adding a margin to prevent the overlap, although im not sure if this is best practive or not? Heres the desired result:
Currently I believe I only have the code setup to display one of these "Squares". Each square will have its own seperate information from the others. The info here is purely for testing purposes.
I have build UserData.cs file within a folder named "Data" that holds the information for the users. That code is:
using System.Collections.ObjectModel;
namespace BudgetSheet.Data
{
class UserDataCollection: ObservableCollection<UserData>
{
public UserDataCollection()
{
// Placeholder, needs to be replaced with CSV or Database information
this.Add(new UserData()
{
Name = "Selected Username"
});
// Placeholder for user selected PayDate
this.Add(new UserData()
{
PayDate = "Friday"
});
// Placeholder for user selected PayDate
this.Add(new UserData()
{
NumberOfItems = "ItemAmount Placeholder"
});
}
}
public class UserData
{
public string Name { get; set; }
public string PayDate { get; set; }
public string NumberOfItems { get; set; }
}
}
This code is there referenced within its own GridView within MainPage.Xaml
The GridView code is as follows:
<Frame x:Name="ContentFrame">
<Frame.ContentTransitions>
<TransitionCollection>
<NavigationThemeTransition/>
</TransitionCollection>
</Frame.ContentTransitions>
<GridView ItemsSource="{StaticResource userDataCollection}"
IsItemClickEnabled="True"
SelectionMode="Single">
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsWrapGrid Orientation="Horizontal"/>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
<GridView.ItemTemplate>
<DataTemplate>
<Grid>
<!-- This is the column definitions, every column needs defining -->
<Grid.ColumnDefinitions>
<ColumnDefinition Width="220"/>
<ColumnDefinition Width="220"/>
<ColumnDefinition Width="220"/>
<ColumnDefinition Width="220"/>
</Grid.ColumnDefinitions>
<!-- This Is the contents of the Grid -->
<TextBlock Grid.Column="0" Text="{Binding Name}"/>
<TextBlock Grid.Column="1" Text="{Binding PayDate}"/>
<TextBlock Grid.Column="1" Text="{Binding NumberOfItems}"/>
</Grid>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
</Frame>
Now, i appreciate that this may not give all of the formatting necessary in order for help on this, so here is the full Mainpage.Xaml Code if necessary. I apologise this is a bit hefty:
<Page x:Class="BudgetSheet.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:controls="using:Microsoft.UI.Xaml.Controls"
xmlns:local="using:BudgetSheet"
xmlns:mux="using:Windows.UI.Xaml.Controls"
xmlns:muxcontrols="using:Microsoft.UI.Xaml.Controls"
xmlns:data="using:BudgetSheet.Data"
RequestedTheme="Dark">
<Page.Resources>
<data:UserDataCollection x:Key="userDataCollection"/>
</Page.Resources>
<Frame Background="{StaticResource CustomAcrylicDarkBackground}">
<mux:NavigationView IsSettingsVisible="False"
PaneTitle=" Budget Sheet Menu "
x:Name="NavView"
IsBackButtonVisible="Collapsed"
PaneDisplayMode="LeftMinimal"
AlwaysShowHeader="True"
SelectionChanged="NavView_SelectionChanged">
<mux:NavigationView.MenuItems>
<StackPanel Orientation="Horizontal" UseLayoutRounding="False">
<AppBarButton Icon="Page2" Margin="0, 2, 1, 0" Tag="New_Sheet" HorizontalAlignment="Center" Width="56.5" Height="56.5" ClickMode="Press" Click="NewFile_ClickAsync"/>
<AppBarButton Icon="OpenFile" Margin="1, 2, 0, 0" Tag="Open_Sheet" HorizontalAlignment="Center" Width="56.5" Height="56.5" ClickMode="Press" Click="OpenFile_ClickAsync"/>
<AppBarButton Icon="Save" Margin="1, 2, 0, 0" Tag="Save_Sheet" HorizontalAlignment="Center" Width="56.5" Height="56.5" ClickMode="Press" Click="SaveButton_ClickAsync"/>
<AppBarButton Icon="Setting" Margin="1, 2, 0, 0" Tag="Settings_Page" HorizontalAlignment="Center" Width="56.5" Height="56.5" ClickMode="Press" Click="SettingsButton_Click"/>
<AppBarButton Icon="Calculator" Margin="1, 2, 0, 0" Tag="Calculator_Open" HorizontalAlignment="Center" Width="56.5" Height="56.5" ClickMode="Press" Click="CalcButton_ClickAsync"/>
</StackPanel>
<mux:NavigationViewItemSeparator/>
<mux:NavigationViewItem Name="HomeItem"
Content="HOME"
Tag="HOME_Page"
FontSize="22"
HorizontalAlignment="Stretch"
FontWeight="Bold"
Foreground="#b880fc"/>
<NavigationViewItemSeparator/>
<mux:NavigationViewItem Name="OverviewItem"
Content="ACCOUNT OVERVIEW"
Tag="OverView_Page"
FontSize="22"
HorizontalAlignment="Stretch"
FontWeight="Bold"
Foreground="#b880fc"/>
<mux:NavigationViewItem Name="BillsItem"
Content="BILLS"
Tag="Bills_Page"
FontSize="22"
HorizontalAlignment="Stretch"
FontWeight="Bold"
Foreground="#b880fc"/>
<mux:NavigationViewItem Name="PeopleItem"
Content="BILL PAYERS"
Tag="BillPayer_Page"
FontSize="22"
HorizontalAlignment="Stretch"
FontWeight="Bold"
Foreground="#b880fc"/>
<mux:NavigationViewItem Name="TransfersItem"
Content="BANK TRANSFERS"
Tag="Transfers_Page"
FontSize="22"
HorizontalAlignment="Stretch"
FontWeight="Bold"
Foreground="#b880fc"/>
<mux:NavigationViewItem Name="PayDatesItem"
Content="PAY DATES"
Tag="PayDates_Page"
FontSize="22"
HorizontalAlignment="Stretch"
FontWeight="Bold"
Foreground="#b880fc"/>
</mux:NavigationView.MenuItems>
<Frame x:Name="ContentFrame">
<Frame.ContentTransitions>
<TransitionCollection>
<NavigationThemeTransition/>
</TransitionCollection>
</Frame.ContentTransitions>
<GridView ItemsSource="{StaticResource userDataCollection}"
IsItemClickEnabled="True"
SelectionMode="Single">
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsWrapGrid Orientation="Horizontal"/>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
<GridView.ItemTemplate>
<DataTemplate>
<Grid>
<!-- This is the column definitions, every column needs defining -->
<Grid.ColumnDefinitions>
<ColumnDefinition Width="220"/>
<ColumnDefinition Width="220"/>
<ColumnDefinition Width="220"/>
<ColumnDefinition Width="220"/>
</Grid.ColumnDefinitions>
<!-- This Is the contents of the Grid -->
<TextBlock Grid.Column="0" Text="{Binding Name}"/>
<TextBlock Grid.Column="1" Text="{Binding PayDate}"/>
<TextBlock Grid.Column="1" Text="{Binding NumberOfItems}"/>
</Grid>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
</Frame>
<NavigationView.PaneFooter>
<Button x:Name="ChangeUser" Style="{StaticResource TextBlockButtonStyle}" Foreground="#b880fc" >
<StackPanel HorizontalAlignment="Stretch" Orientation="Horizontal">
<SymbolIcon Symbol="Contact" Margin="8"/>
<TextBlock VerticalAlignment="Center" HorizontalAlignment="Right" Text="Change User"/>
</StackPanel>
</Button>
</NavigationView.PaneFooter>
</mux:NavigationView>
</Frame>
</Page>
I appreciate all your time and patience with this. If anything on this needs clarifying please let me know. I am running an insider vuild target version of 17723 which may help with a couple of features
you just need to reformat your DataTemplate in the following way :-
<DataTemplate>
<Grid Width="240" Height="240" Background="Gray" Margin="30,0,0,0" VerticalAlignment="Center">
<!--you need rows instead of columns because as you show in the picture you need your textblocks Stacked over each other. -->
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!-- This Is the contents of the Grid -->
<!-- you can style the textblock properties for example fontsizes to set the desired look for each one of them -->
<TextBlock Grid.Row="0" Text="{Binding Name}" HorizontalAlignment="Center" TextAlignment="Center" Width="220" FontSize="24"/>
<TextBlock Grid.Row="1" Text="{Binding PayDate}" HorizontalAlignment="Center" TextAlignment="Center" Width="220" FontSize="14" />
<TextBlock Grid.Row="2" Text="{Binding NumberOfItems}" HorizontalAlignment="Center" TextAlignment="Center" Width="220" FontSize="14"/>
<!-- Any other content u want to put will come here and it should be marked with Grid.Row="3" so that it can come into last (4th) row at the very bottom. -->
</Grid>
</DataTemplate>
also in order to remove the stepping behaviour please remove following code.
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsWrapGrid Orientation="Horizontal"/>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
Try using ItemsControl instead of GridView. Like,
<ItemsControl ItemsSource="{StaticResource userDataCollection}">
<!-- Changing Orientation of VirtualizingStackPanel -->
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<!-- To scroll horizontally -->
<ItemsControl.Template>
<ControlTemplate TargetType="ItemsControl">
<ScrollViewer HorizontalScrollBarVisibility="Visible">
<ItemsPresenter/>
</ScrollViewer>
</ControlTemplate>
</ItemsControl.Template>
<!-- Template for each card-->
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="220"/>
<ColumnDefinition Width="220"/>
<ColumnDefinition Width="220"/>
<ColumnDefinition Width="220"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Text="{Binding Name}"/>
<TextBlock Grid.Column="1" Text="{Binding PayDate}"/>
<TextBlock Grid.Column="1" Text="{Binding NumberOfItems}"/>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
I've been trying to create control dynamically and so far it is working. But my problem is the layout
<Grid Grid.Row="2" >
<ItemsControl IsTabStop="False" ItemsSource="{Binding ListControls}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="120*"/>
<RowDefinition Height="120*"/>
<RowDefinition/>
</Grid.RowDefinitions>
<Label Content="AN:" Margin="5,5,5,5" FontSize="14" VerticalContentAlignment="Center"/>
<TextBox Grid.Column="1" FontSize="14" VerticalContentAlignment="Center" Margin="5,5,5,5"/>
</Grid>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>
With the xaml above. this is the screenshot of the layout
and if i use a xaml like this
<Grid Grid.Row="2" >
<ItemsControl IsTabStop="False" ItemsSource="{Binding ListControls}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch">
<Label Content="AN:" Margin="5,5,5,5" FontSize="14" VerticalContentAlignment="Center"/>
<TextBox Width="100" FontSize="14" VerticalContentAlignment="Center" Margin="5,5,5,5"/>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>
But my goal is i want the textbox to expand if the program is maximized.
How can i adjust the xaml code in order to expand the textbox? Thank you
Directly use Grid instead of StackPanel also remove Width="100".
<Grid HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Label Grid.Column="0" Content="AN:" Margin="5,5,5,5" FontSize="14" VerticalContentAlignment="Center"/>
<TextBox Grid.Column="1" FontSize="14" VerticalContentAlignment="Center" Margin="5,5,5,5"/>
</Grid>
I'd like to add a border around elements in my WPF UniformGrid. What I've tried:
<Window.Resources>
<DataTemplate x:Key="GridCell">
<Border BorderBrush="DarkGray" BorderThickness="5"></Border>
</DataTemplate>
</Window.Resources>
...and...
<UniformGrid Name="grid">
<ItemsControl ItemTemplate="{StaticResource GridCell}"></ItemsControl>
</UniformGrid>
It doesn't work (no border appears). I'd like to have each child of the UniformGrid (buttons which are created programmatically, so they don't appear here) to have a border. It needs to look like, well, a grid... with horizontal and vertical gridlines delineating rows and columns.
<Grid>
<ItemsControl ItemsSource="{Binding NumericalPatches}" >
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<UniformGrid Rows="7" Columns="7"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Border BorderBrush="DimGray" BorderThickness="3">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0" Margin="5" Text="{Binding StringFormat=F4,Path=Red}" FontSize="14" Foreground="Red"/>
<TextBlock Grid.Row="0" Grid.Column="1" Margin="5" Text="{Binding StringFormat=F4,Path=Green}" FontSize="14" Foreground="Green"/>
<TextBlock Grid.Row="1" Grid.Column="0" Margin="5" Text="{Binding StringFormat=F4,Path=Blue}" FontSize="14" Foreground="Blue"/>
<TextBlock Grid.Row="1" Grid.Column="1" Margin="5" Text="{Binding StringFormat=F4,Path=Chroma}" FontSize="14" Foreground="White"/>
</Grid>
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>
I've got 2 listbox and one scrollviewer and I want the scrollviewer to scroll the two listbox together. But i don't know how to do.. Here's my xaml :
<ScrollViewer Grid.Row="1">
<Grid>
<ListBox Name="listboxRSSFeedItems" Width="240" Height="644" Margin="0,0,240,0">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<TextBlock TextWrapping="Wrap" Text="{Binding Title}" Grid.Row="0" FontSize="24" HorizontalAlignment="Left" />
<HyperlinkButton Content="Link to details" NavigateUri="{Binding Link}" HorizontalAlignment="Left" Grid.Row="1" Margin="0,0,0,30" />
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<ListBox Name="listboxRSSFeedItems2" Width="240" Height="644" Margin="240,0,0,0">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<TextBlock TextWrapping="Wrap" Text="{Binding Title}" Grid.Row="0" FontSize="24" HorizontalAlignment="Left" />
<HyperlinkButton Content="Link to details" NavigateUri="{Binding Link}" HorizontalAlignment="Left" Grid.Row="1" Margin="0,0,0,30" />
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
</ScrollViewer>
Thanks a lot
Ok. I just tried to do one listbox with grid. it works fine, but how to choose which grid to add my item.
I used to add with "listboxRSSFeedItems.Items.Add(item)", but now, how can i choose the 2nd Column only.
<ScrollViewer Grid.Row="1">
<ListBox x:Name="listboxRSSFeedItems" Width="480" Height="680">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid x:Name="first" Grid.Column="0">
<TextBlock TextWrapping="Wrap" Text="{Binding Title}" />
<HyperlinkButton NavigateUri="{Binding URL}" TargetName="_blank"/>
</Grid>
<Grid x:Name="second" Grid.Column="1">
<TextBlock TextWrapping="Wrap" Text="{Binding Title}" />
<HyperlinkButton NavigateUri="{Binding URL}" TargetName="_blank" />
</Grid>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</ScrollViewer>
Thanks again
You shouldn't set height of your listBoxes.
ps: Consider layout using columns
<ScrollViewer >
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<ListBox x:Name="first" Grid.Column="0" />
<ListBox x:Name="second" Grid.Column="1" />
</Grid>
</ScrollViewer>
Set VerticalScrollBarVisibility to "Disabled" for listBoxes.
And it will be better using StackPanel for this puprose instead of Grid.