CODEWITHSUNDEEP
c#gridviewuwpwindows-10-universal
Laurent Resman
Laurent Resman

Reputation: 133

GridView Template Binding (C# UWP)

I was getting trough the questions about binding but so far didn't find solution to my problem ( that might be stupid one, but I'm really new to the UWP thing ). I'm trying to add "projects" that my application makes, inside GridView object, so I made template for it:

<GridView x:Name="GV_Seznam_Projektov" Grid.Column="2" Margin="0,10,0,0" Grid.Row="2">
        <GridView.ItemTemplate>
            <DataTemplate x:DataType="x:String">
                <Grid Background="#19162D50" HorizontalAlignment="Left" Width="200" Height="300" VerticalAlignment="Top">
                    <Rectangle Fill="{StaticResource cl_main_back}" HorizontalAlignment="Left" Height="40" VerticalAlignment="Top" Width="200"/>
                    <TextBlock HorizontalAlignment="Left" Height="60" Margin="0,40,0,0" TextWrapping="Wrap" Text="{x:Bind}" VerticalAlignment="Top" Width="200" TextAlignment="Center" Padding="0,15,0,0" FontSize="20" FontWeight="Light"/>
                    <TextBlock HorizontalAlignment="Left" Height="20" Margin="0,80,0,0" TextWrapping="Wrap" Text="by Laurent Resman" VerticalAlignment="Top" Width="200" TextAlignment="Center" Padding="0" FontSize="12" FontWeight="Light"/>
                </Grid>
            </DataTemplate>
        </GridView.ItemTemplate>
    </GridView>

and add objects like this:

GV_Seznam_Projektov.Items.Add("fublisher.io");

I found all documentation about it on msdn network, but then I cam across a problem, I wish that every object would have different "top bar" and background color, so does anyone know how to bind, in my example three different variables inside template? I'm guessing I should make an object, right? but I have no idea how to bind it properly.

Thanks for reading all this :)

Upvotes: 0

Views: 920

Answers (1)

Jayden
Jayden

Reputation: 3286

An ItemsControl object can serve two roles. It can be used to present a fixed set of items, or it can be used to display a list obtained from data binding to a data source. Using an ItemsControl for data is more common. To display data, specify the binding to the data as the ItemsSource value (or use the data context) and don't populate Items. If you want to display a fixed list, populate Items with one or more FrameworkElement child objects, and don't specify ItemsSource.

ItemsSource typically references a list of items. This can be a fixed list from a business object, or a list that's designed to fire notifications if the underlying data changes. The list might be a generic interface (for example IList) or a practical class that implements the collection interfaces that Windows Runtime data binding supports. When you display items in an ItemsControl, you can use the ItemTemplate property, the ItemsPanel property, or both to specify the appearance of the items.

For more info, see For more info, see Remarks of the ItemsControl.

In your code, you set the "fublisher.io" to the Items of the GridView. You should be able to add it to the list and set the list to the ItemsSource of the GridView.

For example:

<GridView x:Name="GV_Seznam_Projektov" Grid.Column="2" Margin="0,10,0,0" Grid.Row="2" ItemsSource="{x:Bind Items}">
    <GridView.ItemTemplate>
        <DataTemplate x:DataType="x:String">
            <Grid Background="#19162D50" HorizontalAlignment="Left" Width="200" Height="300" VerticalAlignment="Top">
                <Rectangle Fill="{StaticResource cl_main_back}" HorizontalAlignment="Left" Height="40" VerticalAlignment="Top" Width="200" />
                <TextBlock HorizontalAlignment="Left" Height="60" Margin="0,40,0,0" TextWrapping="Wrap" Text="{x:Bind}" VerticalAlignment="Top" Width="200" TextAlignment="Center" Padding="0,15,0,0" FontSize="20" FontWeight="Light" />
                <TextBlock HorizontalAlignment="Left" Height="20" Margin="0,80,0,0" TextWrapping="Wrap" Text="by Laurent Resman" VerticalAlignment="Top" Width="200" TextAlignment="Center" Padding="0" FontSize="12" FontWeight="Light" />
            </Grid>
        </DataTemplate>
    </GridView.ItemTemplate>
</GridView>

Code behind:

private ObservableCollection<string> Items;

public MainPage()
{
    this.InitializeComponent();
    Items = new ObservableCollection<string>();
    Items.Add("fublisher.io");
}

Upvotes: 1

Related Questions