Develop Reference

How to access properties inside Listvew ItemsPanelTemplate and DataTemplate

I'm quite new to c# and WPF. I'm making a small Photo Viewer. I want to have a grid of photos in which I can change the number of columns and the size of the pictures depending on user preferences and the size of the screen. I can do everything I need at design time but I don't find how to change some properties during runtime.
In particular, I need to change the number of columns of the UniforGrid and the Width and Height of the Image.
<ListView x:Name="LVMiniaturasGrandes" Margin="23,10,464,270.5" Background="#FF272727" Foreground="White" Visibility="Hidden" BorderBrush="{x:Null}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<UniformGrid Columns="4" HorizontalAlignment="Stretch"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ListView.ItemTemplate>
<DataTemplate>
<ItemsControl Padding="10">
<StackPanel Orientation="Vertical" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
<Image Source="{Binding ImagenGrande2}" Width="200" Height="200" HorizontalAlignment="Stretch" VerticalAlignment="Top" Stretch="Uniform" />
<StackPanel Orientation="Horizontal" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
<TextBlock Text="{Binding NombreFichero}" HorizontalAlignment="Left" VerticalAlignment="Bottom" Foreground="White" />
<TextBlock Text="{Binding VerEstrellas}" Foreground="Red" TextAlignment="Right" HorizontalAlignment="Right" VerticalAlignment="Bottom"/>
</StackPanel>
</StackPanel>
</ItemsControl>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
I expect to be able both to change the number of columns and the height and width of the Image(s) depending on a slider control position and the actual pixel size of the screen.
Any help is welcome. Thanks in advance.
EDIT:
I've been able to modify the number of columns in the UniformGrid. It may not be very elegant but it works. But I'm still not able to access the Width and Height of the Images.
private void RejillaImagenesGrandes_Initialized(object sender, EventArgs e)
{
_UGImagenesGrandes = (UniformGrid)sender;
}
This way I can get access to the UniformGrid and modify the number of columns dynamically

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)

Accessing group-headings sub elements in data-bound GridView

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).

Listbox extending off the page

I have a listbox inside of a stack panel inside of a border in a silverlight application and when ever I add anything to the listbox it increases in height so the scrollbar is never used and it extends beyond the boundaries of the border element. I have tried explicitly setting the height attribute of the listbox, the border and the stack panel and it still goes beyond this.
Here is my code:
<Border x:Name="articlePane">
<StackPanel>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Top">
<Button Content="Latest" MouseEnter="HandleRollInAnimation" MouseLeave="HandleRollOutAnimation" />
<Button Content="Pending" MouseEnter="HandleRollInAnimation" MouseLeave="HandleRollOutAnimation" />
<Button Content="Done" MouseEnter="HandleRollInAnimation" MouseLeave="HandleRollOutAnimation" />
</StackPanel>
<ListBox x:Name="articleList" Margin="5" Background="Transparent" ItemsSource="{Binding}"
ScrollViewer.VerticalScrollBarVisibility="Visible">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical" VerticalAlignment="Top" HorizontalAlignment="Center">
<Image x:Name="articleImage" />
<TextBlock x:Name="articleTitle" Text="{Binding Path=Title}" FontSize="18" FontWeight="Bold"
Margin="5"/>
<TextBlock x:Name="articleDate" Text="{Binding Path=Date}" FontSize="14" Foreground="Gray"
Margin="5"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
</Border>

I have a feeling that the StackPanel just keeps on adding height forever. I think in this instance you'd be better off with a Grid layout within your Border. Put the Button StackPanel in one height defined row, and the ListBox in an autosizing * height row. This way Grid will stick within the confines of your form.