I dynamically want to add panorama items in my application. No. of item(3 to 7) is depend on the json response I am getting. Presently for testing I created 4 items in xaml and it works for me but its not dynamic. Here is my xaml.
<Grid x:Name="LayoutRoot">
<controls:Panorama Title="my panorama" Loaded="Panorama_Loaded" Name="title1" ItemsSource="{Binding}">
<controls:Panorama.Background>
<ImageBrush ImageSource="/Images/Panaroma_BG.png"/>
</controls:Panorama.Background>
<!--Panorama item one-->
<controls:PanoramaItem Header="item1" Name="dashboard1" HeaderTemplate="{StaticResource DashBoardName}">
<Grid>
<ListBox Height="512" HorizontalAlignment="Left" Margin="6,8,0,0" Name="listBox1" VerticalAlignment="Top" Width="403" Tap="listBox1_Tap">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<Rectangle Height="100" Width="400" HorizontalAlignment="Left" Name="rectangle1" Stroke="Black" StrokeThickness="1" VerticalAlignment="Top"/>
<StackPanel Orientation="Horizontal">
<Image Width="100" Height="100" Source="{Binding Image}" Stretch="Fill" HorizontalAlignment="Left" VerticalAlignment="Top" />
<StackPanel Orientation="Horizontal"
Height="132">
<StackPanel Width="300" HorizontalAlignment="Left">
<Grid>
<TextBlock Text="{Binding CurrentValue}" HorizontalAlignment="Left" FontSize="25" />
<Image Width="20" Height="20" Source="{Binding SubImage}" Stretch="Fill" HorizontalAlignment="Right" VerticalAlignment="Bottom"/>
<TextBlock Text="{Binding PreviousValue}" HorizontalAlignment="Right" VerticalAlignment="Top" FontSize="15" />
</Grid>
<StackPanel Width="290" HorizontalAlignment="Right" VerticalAlignment="Stretch" Orientation="Vertical">
<TextBlock Text="{Binding ItemName}" FontSize="20" TextWrapping="Wrap" Width="290" HorizontalAlignment="Left" VerticalAlignment="Bottom"/>
</StackPanel>
</StackPanel>
</StackPanel>
</StackPanel>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
</controls:PanoramaItem>
<!--Panorama item two-->
<!--Panorama item three-->
<!--.................-->
</controls:Panorama>
</Grid>
I don't want to write xaml for Panorama item two, Panorama item three and so on I think there must be some way to do it at runtime. Please help me out.
There must be some template like thing which I can use. and then fill the inner items like CurrentValue , ItemName etc. through code
I have tested below code for pivot. You can implement similar for Panaroma
Dim objPivotItem As PivotItem
Dim sScrollViewer As ScrollViewer
Dim sStackPanel As StackPanel
Dim textHeader As TextBlock
Dim txtContents As RichTextBox
For i = 0 to <Condition>
objPivotItem = New PivotItem
sStackPanel = New StackPanel
sScrollViewer = New ScrollViewer
textHeader = New TextBlock
txtContents = New RichTextBox
'Set TextHeader properties
'Set TxtContents properties
objPivotItem.Content = sScrollViewer
sScrollViewer.Content = sStackPanel
sStackPanel.Children.Add(textHeader)
sStackPanel.Children.Add(txtContents)
objPivot.Items.Add(objPivotItem
)
Next i
You actually can set an ItemsSource property for the whole panorama control, e. g.:
<phone:Panorama x:Name="MyPanorama">
<phone:Panorama.ItemTemplate>
<DataTemplate>
<phone:PanoramaItem Header="MyHeader">
<TextBlock Text="{Binding Text}"/>
</phone:PanoramaItem>
</DataTemplate>
</phone:Panorama.ItemTemplate>
<phone:Panorama.HeaderTemplate>
<DataTemplate>
<TextBlock Visibility="Collapsed" />
</DataTemplate>
</phone:Panorama.HeaderTemplate>
</phone:Panorama>
and then, for example from the code behind:
MyPanorama.ItemsSource = myItemsCollection;
Related
I have GridView like this
<GridView ItemsSource="{Binding PublicLibraries}" SelectionMode="None" IsItemClickEnabled="True"
ItemClick="OnPublicLibrariesItemTapped" x:Name="PublicLibrariesGridView"
Margin="24 0" ItemsPanel="{StaticResource LibraryItemsPanelTemplate}"
ItemTemplate="{StaticResource LibraryDataTemplate}" />
and DataTemplate is something like this
<DataTemplate x:Key="LibraryDataTemplate">
<Grid Width="510" Height="300">
<StackPanel Orientation="Horizontal" Background="Black" Opacity="0.8" VerticalAlignment="Bottom">
<TextBlock Style="{StaticResource TitleTextBlockStyle}" Foreground="White"
Text="{Binding LibName}" Margin="12" Width="450"/>
<Image HorizontalAlignment="Left" Margin="12 6" Width="24" Height="36"
Source="ms-appx:///Assets/Logo.png" Stretch="UniformToFill"
Tapped="OnDetailLibraryTapped" />
</StackPanel>
</Grid>
</DataTemplate>
What I want now is when user taps the image it should fire OnDetailLibraryTapped first. But for now when I tap image it still fires OnPublicLibrariesItemTapped. How I can differentiate when user tap the image or the GridView itself?
I have a Windows Phone 8 project using C#. I created a DataTemplate in my App.xaml file as a resource. I then set the HeaderTemplate property for my PanoramaItem object for that page to use that DataTemplate as a static resource. When I run the app nothing displays in the area reserved for the Header. However, the same XAML code block that I turned into a DataTemplate works fine when it is inline on the page that contains the PanoramaItem object. Why is this happening and how can I fix this?
Here's the original inline XAML code for the PanoramaItem detail page:
<phone:Panorama x:Name="PanoramaMilitaryRobots_DetailVideos" Grid.Row="2" Foreground="{StaticResource CustomApplicationTextBrush}" Background="{StaticResource CustomApplicationBackgroundImage}" SelectionChanged="panoramaMilitaryRobots_DetailVideos_SelectionChanged">
<phone:Panorama.Title>
<StackPanel Orientation="Horizontal" Margin="0,15,0,0">
<Image Height="85" Width="85" Source="http://appstudiodata.blob.core.windows.net/apps/1383/db936107-bce6-41a2-9d95-1d342f66c6bb/res/Logo-b3883645-a6cd-4cc8-82be-97c87a266656.png" Stretch="Uniform" VerticalAlignment="Bottom" HorizontalAlignment="Left" Margin="5,0,10,5" RenderTransformOrigin="0.5,0.5" />
<TextBlock FontSize="92" Text="Robot Videos" FontFamily="Segoe WP Light" Foreground="{StaticResource CustomTitleApplicationTextBrush}" VerticalAlignment="Stretch"/>
</StackPanel>
</phone:Panorama.Title>
<phone:PanoramaItem x:Name="PanoramaMilitaryRobots_DetailVideos0" Margin="0,0,0,25" >
<phone:PanoramaItem.Header>
<StackPanel Orientation="Horizontal" Margin="0,7,0,0">
<TextBlock Text="{Binding CurrentYouTubeVideo.Title, Converter={StaticResource SanitizeString}}" Foreground="{StaticResource CustomApplicationTextBrush}" FontSize="36" TextWrapping="Wrap" Width="420" Height="240"/>
</StackPanel>
</phone:PanoramaItem.Header>
<ctl:FlipControl NextElementCommand="{Binding NextpanoramaMilitaryRobots_DetailVideos0}" PreviousElementCommand="{Binding PreviouspanoramaMilitaryRobots_DetailVideos0}" ShowPreviousButton="{Binding HasPreviouspanoramaMilitaryRobots_DetailVideos0}" ShowNextButton="{Binding HasNextpanoramaMilitaryRobots_DetailVideos0}">
<ctl:FlipControl.InnerContent>
<Grid Margin="10,5,5,5">
<ScrollViewer>
<ctl:YouTubePlayer Margin="0,10" MaxHeight="250" VerticalAlignment="Top" VideoId="{Binding CurrentYouTubeVideo.VideoId, TargetNullValue={StaticResource DefaultNoImageValue}}"/>
</ScrollViewer>
</Grid>
</ctl:FlipControl.InnerContent>
</ctl:FlipControl>
</phone:PanoramaItem>
</phone:Panorama>
Here is the XAML code for the DataTemplate I created in the ApplicationResources section of my App.xaml file:
<DataTemplate x:Key="PanoramaItemHeaderTemplate">
<StackPanel Orientation="Horizontal" Margin="0,7,0,0">
<TextBlock Text="{Binding CurrentYouTubeVideo.Title, Converter={StaticResource SanitizeString}}" Foreground="{StaticResource CustomApplicationTextBrush}" FontSize="36" TextWrapping="Wrap" Width="420" Height="240"/>
</StackPanel>
</DataTemplate>
Here is the new XAML code for the PanoramaItem that is now set to use the DataTemplate:
<phone:Panorama x:Name="PanoramaMilitaryRobots_DetailVideos" Grid.Row="2" Foreground="{StaticResource CustomApplicationTextBrush}" Background="{StaticResource CustomApplicationBackgroundImage}" SelectionChanged="panoramaMilitaryRobots_DetailVideos_SelectionChanged">
<phone:Panorama.Title>
<StackPanel Orientation="Horizontal" Margin="0,15,0,0">
<Image Height="85" Width="85" Source="http://appstudiodata.blob.core.windows.net/apps/1383/db936107-bce6-41a2-9d95-1d342f66c6bb/res/Logo-b3883645-a6cd-4cc8-82be-97c87a266656.png" Stretch="Uniform" VerticalAlignment="Bottom" HorizontalAlignment="Left" Margin="5,0,10,5" RenderTransformOrigin="0.5,0.5" />
<TextBlock FontSize="92" Text="Robot Videos" FontFamily="Segoe WP Light" Foreground="{StaticResource CustomTitleApplicationTextBrush}" VerticalAlignment="Stretch"/>
</StackPanel>
</phone:Panorama.Title>
<phone:PanoramaItem x:Name="PanoramaMilitaryRobots_DetailVideos0" Margin="0,0,0,25" HeaderTemplate="{StaticResource PanoramaItemHeaderTemplate}">
<ctl:FlipControl NextElementCommand="{Binding NextpanoramaMilitaryRobots_DetailVideos0}" PreviousElementCommand="{Binding PreviouspanoramaMilitaryRobots_DetailVideos0}" ShowPreviousButton="{Binding HasPreviouspanoramaMilitaryRobots_DetailVideos0}" ShowNextButton="{Binding HasNextpanoramaMilitaryRobots_DetailVideos0}">
<ctl:FlipControl.InnerContent>
<Grid Margin="10,5,5,5">
<ScrollViewer>
<ctl:YouTubePlayer Margin="0,10" MaxHeight="250" VerticalAlignment="Top" VideoId="{Binding CurrentYouTubeVideo.VideoId, TargetNullValue={StaticResource DefaultNoImageValue}}"/>
</ScrollViewer>
</Grid>
</ctl:FlipControl.InnerContent>
</ctl:FlipControl>
</phone:PanoramaItem>
</phone:Panorama>
I want to add itens to a combobox but in c# because i dont want to add all the time the same comboboxitens. My code is this to the combobox i want to add itens.
<ScrollViewer Margin="252,130,296,134" Grid.Row="1" VerticalAlignment="Top" VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Disabled" ScrollViewer.VerticalScrollMode="Enabled" ScrollViewer.HorizontalScrollMode="Disabled" ScrollViewer.ZoomMode="Disabled">
<StackPanel >
<ItemsControl x:Name="ic" Grid.Row="2">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid HorizontalAlignment="Left" VerticalAlignment="Center">
<StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
<Border BorderBrush="#C83245" Background="White" BorderThickness="1">
<ComboBox x:Name="cbSeletion" VerticalAlignment="Center" FontSize="14" Width="250" Height="40" Foreground="Black" Tapped="cbSeletion_Tapped">
</ComboBox>
</Border>
<Border BorderBrush="#C83245" Background="White" BorderThickness="1">
<TextBlock Text="{Binding Name}" FontSize="14" VerticalAlignment="Center" Width="350" Foreground="Black"/>
</Border>
<Border BorderBrush="#C83245" Background="White" BorderThickness="1" >
<TextBlock Text="{Binding Position}" FontSize="14" VerticalAlignment="Center" Width="250" Foreground="Black"/>
</Border>
</StackPanel>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
</ScrollViewer>
what can i do to use it?
You can bind the combobox ItemsSource to an ObservableCollection in your viewmodel:
<ComboBox ItemsSource="{Binding Items}"/>
The property:
ObservableCollection<string> _items = new ObservableCollection<string>();
public ObservableCollection<string> Items
{
get
{
return _items;
}
}
You can then add items to and from that collection and the items in the dropdown will reflect it.
If you have really few items, you could directly use the ComboBoxItem in XAML, but still it is not that ellegant. The MVVM approach is definately the answer, especially for many items in the collection of the ComboBox, cause it gives you greater flexibility and the logic is not that hard-coded.
I have data binding to a listbox, and texttrimming property set to WordEllipsis, but it doesn't seem to work. The textblocks are showing text as if they do without the texttrimming property set. This is my xaml code. Please help.
<Grid>
<Grid.Resources>
<application:ViewModel x:Key="ViewModel"/>
</Grid.Resources>
<TextBlock Height="75" TextWrapping="Wrap" Text="Click on Settings to search for quotes (by author or by query)." VerticalAlignment="Top" TextAlignment="Center" FontSize="26.667"/>
<ListBox Margin="0,166,0,0" Name="lstQuote" DoubleTap="lstQuote_DoubleTap" Hold="lstQuote_Hold">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<es:RegularPolygon Fill="#FFF4F4F5" Height="90" InnerRadius="0.47211" PointCount="5" Stretch="Fill" Stroke="Black" UseLayoutRounding="False" Width="84"/>
<StackPanel Orientation="Vertical" Margin="0,10,0,0">
<TextBlock Text="{Binding Author}" TextWrapping="Wrap" FontSize="24"/>
<TextBlock Text="{Binding Quote}" TextWrapping="NoWrap" FontSize="30" TextTrimming="WordEllipsis" Width="Auto" />
</StackPanel>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<Button Content="Random Quote" Height="79" Margin="48,83,44,0" VerticalAlignment="Top" x:Name="quotSearch" Click="quotSearch_Click" />
</Grid>
change TextBox Width properties to fixed width
<TextBlock Width="200" Height="75" TextWrapping="Wrap" Text="Click on Settings to search for quotes (by author or by query)." VerticalAlignment="Top" TextAlignment="Center" FontSize="26.667"/>
i design page bellow code.
<ScrollViewer VerticalScrollBarVisibility="Visible" Grid.Row="1" x:Name="svProduct">
<StackPanel>
<ItemsControl x:Name="lstSearchResult" ItemsSource="{Binding Path=PIProductList}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel Width="480" Style="{Binding CellStyle}" Orientation="Horizontal" VerticalAlignment="Center" Height="50" >
<TextBlock Foreground="Black" FontSize="20" Width="320" FontFamily="Tahoma" Margin="10,0,0,0" Text="{Binding Title}" VerticalAlignment="Center" TextWrapping="Wrap"></TextBlock>
<Button Name="btnBookmark" Click="btnBookmark_Click" Tag="{Binding}" Background="Transparent">
<Button.Content>
<Image Source="/Images/bookmarks_red.png" Width="33" Height="30" VerticalAlignment="Top" Margin="-15"></Image>
</Button.Content>
</Button>
<Button BorderThickness="0" x:Name="btnSubmit" Click="btnSubmit_Click" Background="Transparent" Tag="{Binding}" >
<Button.Content>
<Image Name="ram" Source="/Images/blue_arrow.png" Width="40" Height="40" VerticalAlignment="Top" Margin="-15"></Image>
</Button.Content>
</Button>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
</ScrollViewer>
i want to access for btnBookmark visuble false .
can't access btnBookmark.Visibility=Visibility.collapsed
how to do this?
please help to me...........
The best way I know to do this is to create a Visiblity property on your item ViewModel (the one that is bound to each row in your ItemsControl) and toggle that value based on the changes to each item, presumably via the toggle button in each row. I don't know of a good way to "loop and look" for these internal controls. You're much better off using the existing data binding infrastructure to manage this for you.