Accessing group-headings sub elements in data-bound GridView - c#

I'm developing a windows 8 metro application with a data-bound gridview xaml control.
I've added a ring progress bar named progressRingGroup to header of the groups as seen below.
<ProgressRing x:Name="progressRingGroup" IsActive="True" Visibility="Visible" Width="16" Height="16" Margin="0,-7,0,0"/>
I want to programmatically access the ring-progress-bar from my code (so I can start/stop it) but as my grid-view is databound I don't know how to do so.
I've multiple groups in the gridview and need to access all of them separately.
Here's my gridview's groupstyle xaml definition;
<GridView.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<Grid Margin="1,0,0,6">
<Button
AutomationProperties.Name="Group Title"
Click="Header_Click"
Style="{StaticResource TextPrimaryButtonStyle}" >
<StackPanel Orientation="Horizontal">
<ProgressRing x:Name="progressRingGroup" IsActive="True" Visibility="Visible" Width="16" Height="16" Margin="0,-7,0,0"/>
<TextBlock Text="{Binding Title}" Margin="6,-7,10,10" Style="{StaticResource GroupHeaderTextStyle}" />
<TextBlock Text="{StaticResource ChevronGlyph}" FontFamily="Segoe UI Symbol" Margin="0,-7,0,10" Style="{StaticResource GroupHeaderTextStyle}"/>
</StackPanel>
</Button>
</Grid>
</DataTemplate>
</GroupStyle.HeaderTemplate>
<GroupStyle.Panel>
<ItemsPanelTemplate>
<VariableSizedWrapGrid ItemWidth="75" ItemHeight="150" Orientation="Vertical" Margin="0,0,80,0" MaximumRowsOrColumns="3"/>
</ItemsPanelTemplate>
</GroupStyle.Panel>
</GroupStyle>
</GridView.GroupStyle>
Help appreciated.

If you want to be able to control the IsActive property of each progress ring, add a bool property to your group data model, and bind IsActive to that property. That way you can control each ProgressRing without having to programatically access all of them.
For example:
<ProgressRing x:Name="progressRingGroup" IsActive="{Binding GroupLoading}" Visibility="Visible" Width="16" Height="16" Margin="0,-7,0,0"/>
If you still want to access each programmatically, you could assign a Loaded event to the ProgressRing in the DataTemplate, and when the event fires, grab a reference to the ring (sender).

Related

store content of a textblock in a gridview into a variable

i am developing a windows store app. I have a gridview control which has a textblock named "fileName". I have programmatically set the gridview to display the names of the files present in the local folder of the app. the names are displayed in the "fileName" textblock.
Now i want to store the textblock(fileName) content into a variable, so that I can use the variable to access the files, when the user selects a particular item. How can i do this?
here are the xaml codes:
<DataTemplate x:Key="ImageOverlayAlbumDataTemplate">
<Grid Background="#FF939598" Height="130" Width="130">
<Image Source="/Assets/reel.png" Stretch="UniformToFill"/>
<StackPanel Orientation="Vertical" Background="#CC000000" Height="50" VerticalAlignment="Bottom">
<TextBlock x:Name="fileName" Text="{Binding}" Margin="10,3,0,0" Width="120" Height="20"
TextTrimming="WordEllipsis" HorizontalAlignment="Left"/>
</StackPanel>
</Grid>
</DataTemplate>
<GridView x:Name="displayFiles" CanReorderItems="True" CanDragItems="True"
ItemTemplate="{StaticResource ImageOverlayAlbumDataTemplate}" Margin="41,46,682,191" Grid.Row="1" >
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsWrapGrid MaximumRowsOrColumns="3"/>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
</GridView>
The gridview has a selecteditems property on it that could be data bound to a list of strings.
Note you will also have to set the properties on the grid to allow multiple selections (SelectionMode="multiple")

Windows Phone WrapPanel behaving differntly with design data and at runtime

I'm using a WrapPanel as a part of an ItemsControl in a WP8 application. everything works fine including it's designtime data view, and I'm using the same ViewModel with a WinRT application which uses a WrapGrid (which works both designtime and runtime)
While all the other elements of the View show up on runtime perfectly, the Itemscontrol does not populate, is there any known issue with the WrapPanel, how do I show a gridlike view of my items then? the code I've used is below
<ItemsControl x:Name="times" Background="{x:Null}" Height="120" ItemsSource="{Binding CheckinTimes}" ItemsPanel="{StaticResource BoxStyle}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical" Margin="5,10" Width="70" >
<TextBlock Text="{Binding Type}" Margin="0" Foreground="White" FontFamily="Segoe UI Light" FontSize="13.333" HorizontalAlignment="Left" />
<TextBlock Text="{Binding Time}" Margin="0" Foreground="White" FontFamily="Segoe UI Light" FontSize="13.333" HorizontalAlignment="Left" />
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
under resources
<ItemsPanelTemplate x:Key="BoxStyle">
<toolkit:WrapPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
I was hiding the control before populating it, but the visibility was wrongly bound. I corrected that and it fixed this issue, I'm not sure how it's related but it worked. I would say for any similar errors, watch the bindings around control visibility.

Windows Store App - XAML UI element not visible in C# code

I have the following XAML code and the only element available in the C# code behind are the Grid and the FlipView. How can I make the ScrollViewer, Image or the Viewbox visibile in the code?
XAML:
<Grid x:Name="gridViewPages">
<FlipView x:Name="FlipView1" Loaded="FlipView1_Loaded" Style="{StaticResource FlipViewPreviewIndicator}" Tapped="FlipView1_Tapped">
<FlipView.ItemTemplate>
<DataTemplate>
<ScrollViewer x:Name="pagesScrollViewer" ZoomMode="Enabled"
HorizontalAlignment="Center"
VerticalAlignment="Center"
HorizontalScrollBarVisibility="Hidden"
VerticalScrollBarVisibility="Hidden"
MinZoomFactor="1.0"
MaxZoomFactor="3.0"
Margin="0"
Width="1500" DoubleTapped="PagesScrollViewer_DoubleTapped">
<Viewbox x:Name="pagesViewbox">
<Image Source="{Binding}"
Height="730"
x:Name="pageImage" Stretch="Uniform" Loaded="MainImage_Loaded"/>
</Viewbox>
</ScrollViewer>
</DataTemplate>
</FlipView.ItemTemplate>
</FlipView>
</Grid>
The flipview is customized and contains also a listview defined in which is not visible in the code too...:
<Page.Resources>
...
<ListView x:Name="pagesPreview" HorizontalAlignment="Center" Height="100" VerticalAlignment="Bottom" Width="Auto"
ItemsSource="{TemplateBinding ItemsSource}"
SelectedItem="{Binding SelectedItem, Mode=TwoWay, RelativeSource={RelativeSource Mode=TemplatedParent}}"
ScrollViewer.HorizontalScrollBarVisibility="Auto"
ScrollViewer.VerticalScrollBarVisibility="Disabled"
ScrollViewer.HorizontalScrollMode="Enabled"
ScrollViewer.VerticalScrollMode="Disabled"
Background="AliceBlue"
Opacity="1"
SelectionChanged="pagesPreview_SelectionChanged"
Visibility="Visible">
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<ListView.ItemTemplate>
<DataTemplate>
<Grid HorizontalAlignment="Center" VerticalAlignment="Center">
<Image Source="{Binding}" Stretch="UniformToFill"/>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
...
</Page.Resources>
See the basic concept of the flipview is to have multiple pages to have a flip effect. So whatever the Data template contains is repeated multiple times. So if you want the x:Name to come up then you wont have any success.
There are two ways As per my knowledge :
VisualTreeHelper -> for a better detail of it go through this link
Get elements from data template
you can manually iterate over the flipview elements and track down the children of the flipview. Try that in debug mode you'll get a fair idea of what comes after what. Just keep track of the element at which selected index position you want modified
Thanks.

How to show a list of items?

I need to show a list of tweets. each tweet can be highlighted programmatically and also I can add some new controls to the tweet item. and I am using data binding.
for my purpose above, I thought of using a LongListSelector but it is too buggy, and it seems that I can't access a collection of its items (can I?). what else is suitable for showing a list of items, each item can contain some other controls, and also supports binding? I don't see another thing in the toolbox? is there any ester egg?
It's windows phone 8 app.
You can use a ListBox
<ListBox Name="listboxTimeline" Width="450" >
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Margin="0,5,0,5" >
<Button Click="btn1_Click" >
<StackPanel VerticalAlignment="Top">
<Image Name="image" Source="{Binding ImageSource}" />
</StackPanel>
</Button>
<StackPanel Width="337">
<TextBlock Text="{Binding UserName}" />
<TextBlock Text="{Binding Content}" TextWrapping="Wrap" />
</StackPanel>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
And then you can data bind to this from your CS page. ( The above code is just a sample)

WP7 C# - How to change style of Pivot header

I need to change Pivot header background and padding (top menu of Pivot control where are titles of pivot items).
I try this:
<controls:Pivot Grid.Row="1" Margin="0" Padding="0">
<controls:Pivot.HeaderTemplate>
<DataTemplate>
<StackPanel Background="#666666" Margin="0" />
</DataTemplate>
</controls:Pivot.HeaderTemplate>
<controls:PivotItem Background="#65006a">
<controls:PivotItem.Header>
<TextBlock FontSize="60" Margin="0">tasks</TextBlock>
</controls:PivotItem.Header>
</controls:PivotItem>
</controls:Pivot>
But it doesnt solve it.
How can I do this?
The proper way to do it is with the following snipped:
<controls:Pivot.HeaderTemplate>
<DataTemplate>
<StackPanel Background="#666666" Margin="0">
<TextBlock FontSize="60" Margin="0" Text="{Binding}"/>
</StackPanel>
</DataTemplate>
</controls:Pivot.HeaderTemplate>
<controls:PivotItem Background="#65006a" Header="tasks">
</controls:PivotItem>
Each PivotItem has header text which is then passed to the data template contained in HeaderTemplate. You can see that I've moved TextBlock inside StackPanel and set its text via binding. What you did wrong is that header template contained only StackPanel and nothing inside it.
Here, I have modified the header of a pivot control. I have defined different control with different colours so you can easily identify what I have done. Modify this source as per need to change pivot header.
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<phone:Pivot>
<phone:Pivot.HeaderTemplate>
<DataTemplate>
<StackPanel Background="Blue"
Margin="15,-10,0,0">
<TextBlock Text="{Binding}"
FontSize="20"
/>
</StackPanel>
</DataTemplate>
</phone:Pivot.HeaderTemplate>
<phone:PivotItem Header="item1">
<Grid Background="Red"></Grid>
</phone:PivotItem>
<phone:PivotItem Header="item2">
<Grid Background="Green"></Grid>
</phone:PivotItem>
</phone:Pivot>
</Grid>

Categories

Resources