I have a a Grid/GridView that I have built in XAML. I have a list that is dynamically building the GridViewItems. I am trying to add elements to the GridViewItems that are being dynamically built. I have it going through a loop and building the GridViewItems fine, I just can't seem to grasp how to add the elements (TextBlocks, Symblos, etc.) to the GridViewItems. I will post what I have below:
XAML
<Grid Background="LightGray">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition />
</Grid.RowDefinitions>
<controls:PageHeader BackButtonVisibility="Collapsed" Content="News" Frame="{x:Bind Frame}">
<Interactivity:Interaction.Behaviors>
<Behaviors:EllipsisBehavior Visibility="Auto" />
</Interactivity:Interaction.Behaviors>
<controls:PageHeader.SecondaryCommands>
<AppBarButton Click="{x:Bind ViewModel.GotoPrivacy}" Label="Privacy" />
<AppBarButton Click="{x:Bind ViewModel.GotoAbout}" Label="About" />
</controls:PageHeader.SecondaryCommands>
</controls:PageHeader>
<GridView x:Name="tileGridView" Margin="12,60">
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsWrapGrid Orientation="Horizontal"/>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
<GridView.ItemContainerStyle>
<Style TargetType="GridViewItem">
<Style.Setters>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Grid Background="#2A2A2A"
Margin="5"
Height="200"
Width="300">
<ContentPresenter />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style.Setters>
</Style>
</GridView.ItemContainerStyle>
</Grid>
C#
List<TextBlock> tList = new List<TextBlock>();
for (int j = 0; j < myList.Count; j++)
{
tList.Add(new TextBlock()
{
Text = myList[j].TitleView,
Foreground = new SolidColorBrush(Windows.UI.Colors.White)
});
tList.Add(new TextBlock()
{
Text = myList[j].BodyView,
Foreground = new SolidColorBrush(Windows.UI.Colors.White)
});
}
tileGridView.ItemsSource = myList;
I am unable to figure out a way to add the titleTextBlock to the GridViewItem. The GridViewItem is not being built until I set the itemssource to myList.
Can anyone guide me on how to add the textblock I have built to my GridViewItem?
UPDATE
I have added my update to where I am now... I have successfully built the textblock, but I have not been able to find a way to add the textblocks to a GridViewItem. My List returns 2 objects right now. That should build 2 GridViewItems, which it does, but inside of those 2 objects there are 4 pieces of information(Title, Body, Author, Date). I am trying to build 4 textblocks to place in each GridViewItem... Hope this explains better of what I am trying to accomplish.
I was able to figure the solution out... This is what I did, if anyone knows of a better way to do this, please feel free to counter my answer.
<DataTemplate x:Key="TileTemplate">
<StackPanel Orientation="Vertical">
<TextBlock Text="{Binding TitleView}" FontFamily="Segoe UI" FontWeight="SemiBold" FontSize="18" Foreground="White" TextWrapping="Wrap" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="10,10" />
<TextBlock Text="{Binding BodyView}" FontFamily="Segoe UI" FontWeight="Light" FontSize="14" Foreground="White" TextWrapping="Wrap" Margin="10,0" />
</StackPanel>
</DataTemplate>
<GridView x:Name="tileGridView" Margin="12,60" ItemTemplate="{StaticResource TileTemplate}">
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsWrapGrid Orientation="Horizontal"/>
</ItemsPanelTemplate>
</GridView>
I then bind the data to the gridview:
tileGridView.ItemsSource = myList;
Related
I have a WrapPanel which is the parent of many TextBlock in an ItemsControl.
Each TextBlock displays a word in Arabic, and the whole forms a sentence. To display the sentence, I put in my Binding List to the ItemsControl the words in the order they are in an Arabic reading (from right to left).
public UserControl_ArabicVerseSelectable(List<WordInVerse> wordsInVerse)
{
InitializeComponent();
List<WordsOfUC> items = new List<WordsOfUC>();
foreach (WordInVerse word in wordsInVerse)
{
items.Add(new WordsOfUC() { Arabic = word.Arabic, WordID = word.WordID });
}
items.Reverse();
ItemControl_Words.ItemsSource = items;
}
WPF:
<ItemsControl x:Name="ItemControl_Words"
HorizontalAlignment="Center"
Margin="0,10,0,0" >
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical"
Margin="5,0,5,0">
<TextBlock Tag="{Binding WordID}"
x:Name="textBlock_arabic"
Text="{Binding Arabic}"
FontSize="40"
HorizontalAlignment="Center"
FontFamily="Noto Naskh Arabic"
Cursor="Hand"
MouseDown="textBlock_arabic_MouseDown"/>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
That is to say:
...word3, word2, word1
The problem is that when the sentence is only one line long in the wrapPanel, it displays very well:
But as soon as the sentence is two lines long...
The last line should be above the first, as it is the beginning of the sentence, but since the words are added from right to left, first the first line fills and then only the second.
So is there any way to add children to the WrapPanel from right to left, or if not, is there any way to reverse all the lines in a WrapPanel?
Add The "FlowDirection" Style Triggers to your TextBlock
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical" Margin="5,0,5,0">
<TextBlock Tag="{Binding WordID}" x:Name="textBlock_arabic" Text="{Binding Arabic}" FontSize="40" HorizontalAlignment="Center"
FontFamily="Noto Naskh Arabic" Cursor="Hand"
MouseDown="textBlock_arabic_MouseDown">
<TextBlock.Style>
<Style TargetType="{x:Type TextBlock}">
<Style.Triggers>
<Trigger Property="FlowDirection"
Value="RightToLeft">
<Setter Property="TextAlignment"
Value="Right" />
</Trigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
NOTE: I took this of a project a long time ago.
I made a list view, and i used a data Template as you seeing
below and now i want to select the Which item,the user selected and put the text of the selected item textblock to a variable
<ListView.ItemTemplate>
<DataTemplate >
<Border CornerRadius="20"
BorderThickness="2"
BorderBrush="Red"
Width="70"
Height="70"
Margin="5,5">
<Button x:Name="calender_btn"
Background="Transparent"
BorderBrush="Transparent"
Style="{StaticResource calender_btn_style}"
Click="calender_btn_Click">
<TextBlock x:Name="calender_txt_block"
Text="{Binding _outputdate}"
Foreground="White"
Width="55"
FontSize="14"
Margin="3,5"
TextWrapping="Wrap"
VerticalAlignment="Center"
HorizontalAlignment="Center"
TextAlignment="Center"
>
</TextBlock>
<Button.Resources>
<Style TargetType="Border">
<Setter Property="CornerRadius" Value="20"/>
</Style>
</Button.Resources>
</Button>
</Border>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel/>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
I have no idea how I can do it, because I am new in wpf, if you know how I can do it.
Depending on how your data looks like, you probably get a data object to each button that contains the text. You can find that object in the buttons data context.
private void calender_btn_Click(object sender, RoutedEventArgs e)
{
var dataObject = ((Button)sender).DataContext;
}
If you are using ItemsSource you can get the selected value by binding to ListView SelectedItem (SelectedValue in some cases).
SelectedItem="{Binding SelectedData, Mode=TwoWay}"
Assuming that you have SelectedData property in your DataContext with same type as your data in the shown collection.
Google for MVVM
Hello Can anyone advice how to make LiveCharts on legend item click toggle charts visibility(on/off), code below:
<lvc:CartesianChart Height="312" Width="389" LegendLocation="Bottom" Pan="None">
<lvc:CartesianChart.ChartLegend>
<lvc:DefaultLegend Tag="1" MouseLeftButtonDown="DefaultLegend_Click">
</lvc:DefaultLegend>
</lvc:CartesianChart.ChartLegend>
<lvc:CartesianChart.DataTooltip>
<lvc:DefaultTooltip SelectionMode="SharedYInSeries" />
</lvc:CartesianChart.DataTooltip>
<lvc:CartesianChart.Series>
<lvc:LineSeries Visibility="Visible" Values="9,5,5,1,0,8" Title="Chart One"/>
<lvc:LineSeries x:Name="FirstChart" Visibility="Visible" Values="19,15,15,11,10,18" Title="Chart Two"/>
</lvc:CartesianChart.Series>
</lvc:CartesianChart>
I tried to use Livecharts examples but assigning mouseleftbutton event works not on legend item, but on whole layer, how can assign event on just item not on whole legend layer?
You'll have to override default template in order to receive MouseLeftButtonDown event on individual legend as default legend is just a collection of series.
<lvc:DefaultLegend.Template>
<ControlTemplate>
<ItemsControl ItemsSource="{Binding Series}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" MouseLeftButtonDown="StackPanel_MouseLeftButtonDown">
<Ellipse Height="16"
Width="16"
Stroke="{Binding Stroke}"
StrokeThickness="{Binding StrokeThickness}" />
<TextBlock Text="{Binding Title}" Padding="5" Margin="5" />
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ControlTemplate>
</lvc:DefaultLegend.Template>
I have got a ListView wich I added Elements by binding. The ListView looks like:
<ListView
x:Name="ListView"
Height="auto"
Width="350"
ItemsSource="{Binding}"
Padding="0,0,-20,0"
Grid.Row="1"
Grid.Column="0"
Background="#EFEFEF"
ItemContainerStyle="{StaticResource ListViewStyle}">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Height="50" VerticalAlignment="Top" Margin="0,0,0,0"
<TextBlock Text="{Binding name} TextWrapping="NoWrap"/>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
With this basic setup there is already an animation when a element is bonded to the underlying List. Strangely to different animations are used. The first element slides in from the right and all other elements popup. I’m searching for a way to animate all added elements the same way (e.g. slide in from the right). I have been locking into the auto generated (by Blend) ListViewStyle for hours now but couldn't find something. Later I found out that it is possible to add this property inside the style:
<Style x:Key="ListViewStyle" TargetType="ListViewItem">
<Setter Property="Transitions">
<Setter.Value>
<TransitionCollection>
<EntranceThemeTransition FromHorizontalOffset="400" />
<PopupThemeTransition FromHorizontalOffset="400"/>
</TransitionCollection>
</Setter.Value>
</Setter>
...
</Style>
The EntranceThemeTransition and PopupThemeTransition seems to be the right properties because they change the behavior of the animation. But I don't know how to use them or how to disable one. How can I get just one animation (slide in from the right) to the ListView?
This should work:
<ListView
x:Name="lv">
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel>
<VirtualizingStackPanel.ChildrenTransitions>
<TransitionCollection>
<EntranceThemeTransition
FromHorizontalOffset="400" />
</TransitionCollection>
</VirtualizingStackPanel.ChildrenTransitions>
</VirtualizingStackPanel>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
</ListView>
*Update:
You can also use ListView.ItemContainerTransitions to define these transitions.
I'm currently trying to figure out how to show different types of objects in a GridView, look at this Pic for example:
the last element on the right side is different than the other elements, so if i bind an observablecollection to the GridView, how can i say that the last element is shown up in anohter layout.
currently I'm using this XAML-Code
<GridView x:Name="startView" ItemsSource="{Binding}" Grid.Column="1" Grid.Row="2" SelectionMode="None" Width="Auto">
<GridView.ItemTemplate>
<DataTemplate>
<StackPanel>
<TextBlock x:Name="DetailTitle" Height="74" Text="{Binding Title}" />
<Image x:Name="Image" Height="Auto" Width="Auto" Margin="0" Stretch="None" Source="{Binding LocalCoverUrl}" Visibility="Collapsed" />
</StackPanel>
</DataTemplate>
</GridView.ItemTemplate>
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<WrapGrid Orientation="Horizontal" MaximumRowsOrColumns="2" />
</ItemsPanelTemplate>
</GridView.ItemsPanel>
</GridView>
and this Code in the Back:
ObservableCollection<Movie> recentlyStarted = await Api.RecentlyStarted(3);
startView.DataContext = recentlyStarted;
but I have currently no clue how to let the last element show up in a different style
The easy way would be to have the two types of object as different classes (e.g. MoviePicStyle + MoviePlainStyle. Then move your DataTemplate out of the GridView, so that each object is picked up by type,
e.g.
<Window.Resources>
<DataTemplate DataType="{x:Type ViewModel:MoviePicStyle}">
<StackPanel>
<TextBlock x:Name="DetailTitle" Height="74" Text="{Binding Title}" />
<Image x:Name="Image" Height="Auto" Width="Auto" Margin="0" Stretch="None" Source="{Binding LocalCoverUrl}" Visibility="Collapsed" />
</StackPanel>
<DataTemplate DataType="{x:Type ViewModel:MoviePlainStyle}">
...Different View...
</DataTemplate>
</Window.Resources>
<GridView...
Use template selector property of gridview and depending upon the type of object select the template. I did the same in my project. you need to write your own DataTemplateSelector.
I referred below link
http://babaandthepigman.wordpress.com/2012/02/08/datatemplateselector-winrt/