In my app I'm having a ListBox that I have already set it's ItemTemplate, and it's working just fine. But after facing some problems I decided to change the ListBox into an ItemsControl,
So I just changed the ListBox keyword with ItemsControl, (whitch I don't know if it's allowed). But when I run the app an InvalidCastExeption is unhandeled at the InitializeComponent.
I am still new to programming so can anyone help me with this?
EDIT:
<ListBox Name="ChannelsSearchResaultList" Visibility="Collapsed" Grid.Row="1">
<ListBox.ItemTemplate>
<DataTemplate>
<Border Name="ChannelContainer" Margin="5" Width="470"
HorizontalAlignment="Stretch" BorderBrush="BlueViolet"
BorderThickness="2" Background="#FF1D1D1D" MouseLeftButtonDown=
"Border_MouseLeftButtonDown" MouseLeftButtonUp=
"ChannelContainer_MouseLeftButtonUp">
<Grid Height="110">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="340"/>
</Grid.ColumnDefinitions>
<Image Source="{Binding Logo}" Margin="5"/>
<TextBlock Text="{Binding Duration}" Margin="10,5"
VerticalAlignment="Bottom" HorizontalAlignment="Right"/>
<Canvas Grid.Column="1" >
<TextBlock Text="{Binding Title}" FontWeight="Bold"
Foreground="Red"/>
<TextBlock Text="{Binding Views}" Canvas.Top="60"
Canvas.Left="20" />
</Canvas>
</Grid>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Related
I've been trying to create control dynamically and so far it is working. But my problem is the layout
<Grid Grid.Row="2" >
<ItemsControl IsTabStop="False" ItemsSource="{Binding ListControls}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="120*"/>
<RowDefinition Height="120*"/>
<RowDefinition/>
</Grid.RowDefinitions>
<Label Content="AN:" Margin="5,5,5,5" FontSize="14" VerticalContentAlignment="Center"/>
<TextBox Grid.Column="1" FontSize="14" VerticalContentAlignment="Center" Margin="5,5,5,5"/>
</Grid>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>
With the xaml above. this is the screenshot of the layout
and if i use a xaml like this
<Grid Grid.Row="2" >
<ItemsControl IsTabStop="False" ItemsSource="{Binding ListControls}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch">
<Label Content="AN:" Margin="5,5,5,5" FontSize="14" VerticalContentAlignment="Center"/>
<TextBox Width="100" FontSize="14" VerticalContentAlignment="Center" Margin="5,5,5,5"/>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>
But my goal is i want the textbox to expand if the program is maximized.
How can i adjust the xaml code in order to expand the textbox? Thank you
Directly use Grid instead of StackPanel also remove Width="100".
<Grid HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Label Grid.Column="0" Content="AN:" Margin="5,5,5,5" FontSize="14" VerticalContentAlignment="Center"/>
<TextBox Grid.Column="1" FontSize="14" VerticalContentAlignment="Center" Margin="5,5,5,5"/>
</Grid>
I need to bind an array of objects in ItemsSource , but not bind in the standard way , ie on row , but on columns , so two different xaml objects in succession .
Let me explain, I now have solved so :
but I would need to turn the view and make it to the grid as well :
In this case I have two objects to bind to each row , so I find it hard bindare objects from the array in succession on two different columns at the same time , my xaml code :
<surface:SurfaceScrollViewer x:Name="listDocumentsVisibility" Visibility="Visible" Grid.Column="1" Grid.Row="0" Margin="15,36,15,35" Background="GhostWhite" VerticalScrollBarVisibility="Hidden" PanningMode="Both">
<ItemsControl ItemsSource="{Binding Path=AttachmentsFileList}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<surface:SurfaceButton Tag="{Binding ATID}" Click="Meeting_Click">
<Button.Template>
<ControlTemplate TargetType="{x:Type Button}">
<StackPanel>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"></ColumnDefinition>
<ColumnDefinition Width="1*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="60"/>
</Grid.RowDefinitions>
<StackPanel Grid.Row="0" Margin="10,5,0,0" Grid.Column="0">
<Image Width="26" Margin="5,10,0,0" HorizontalAlignment="Left" VerticalAlignment="Center" Source="/Resources/Images/icon-document-browser.png"></Image>
<TextBlock FontFamily="{StaticResource Lato Light}" HorizontalAlignment="Left" Margin="38,-30,0,0" FontSize="12" Text="{Binding Name}"></TextBlock>
<TextBlock FontFamily="{StaticResource Lato Light}" HorizontalAlignment="Left" Margin="38,-15,0,0" FontSize="9" Foreground="#6C6C6C" Text="{Binding LastOpenDate}"></TextBlock>
<TextBlock FontFamily="{StaticResource Lato Light}" HorizontalAlignment="Left" Margin="38,-3,0,0" FontSize="9" Foreground="#6C6C6C" Text="istituto"></TextBlock>
</StackPanel>
<StackPanel Grid.Row="0" Margin="10,5,0,0" Grid.Column="1">
<Image Width="26" Margin="5,10,0,0" HorizontalAlignment="Left" VerticalAlignment="Center" Source="/Resources/Images/icon-document-browser.png"></Image>
<TextBlock FontFamily="{StaticResource Lato Light}" HorizontalAlignment="Left" Margin="38,-30,0,0" FontSize="12" Text="{Binding Name}"></TextBlock>
<TextBlock FontFamily="{StaticResource Lato Light}" HorizontalAlignment="Left" Margin="38,-15,0,0" FontSize="9" Foreground="#6C6C6C" Text="{Binding LastOpenDate}"></TextBlock>
<TextBlock FontFamily="{StaticResource Lato Light}" HorizontalAlignment="Left" Margin="38,-3,0,0" FontSize="9" Foreground="#6C6C6C" Text="istituto"></TextBlock>
</StackPanel>
</Grid>
</StackPanel>
</ControlTemplate>
</Button.Template>
</surface:SurfaceButton>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</surface:SurfaceScrollViewer>
obviously the whole is dynamic , depending on the rest call I receive.
can bind two array index , one next to another in the same row ?
Thank you
Use an ItemsControl and set the ItemsPanel to be a UniformGrid with Columns=2, just make sure you set VerticalAlignment="Top" so that the items don't get stretched out and wrap the whole thing in a ScrollViewer if you need to:
<ScrollViewer HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Auto">
<ItemsControl ItemsSource="{Binding MyItems}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<UniformGrid Columns="2" VerticalAlignment="Top" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
</ScrollViewer>
This is a general question and I am looking for a workaround.
Is there a way to create a TextBox item inside a PanoramaItem?
This is my PanoramaItem:
<phone:PanoramaItem x:Name="Panorama2" Header="Ringtones">
<!--Double line list with image placeholder and text wrapping using a floating header that scrolls with the content-->
<phone:LongListSelector Margin="0,-38,0,100" ItemsSource="{Binding Items2}" Tap="LongListSelector_Tap">
<phone:LongListSelector.ListHeaderTemplate>
<DataTemplate>
<Grid Margin="12,0,0,38">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
</Grid>
</DataTemplate>
</phone:LongListSelector.ListHeaderTemplate>
<phone:LongListSelector.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Margin="12,2,0,4" Height="105" Width="432">
<StackPanel Width="311" Margin="8,-7,0,0">
<TextBlock Text="{Binding LineOne}" TextWrapping="Wrap" Margin="10,0" Style="{StaticResource PhoneTextExtraLargeStyle}" FontSize="{StaticResource PhoneFontSizeLarge}"/>
<TextBlock Text="{Binding LineTwo}" TextWrapping="Wrap" Margin="10,-2,10,0" Style="{StaticResource PhoneTextSubtleStyle}" />
</StackPanel>
<Image Source="{Binding PlayPhoto}" Width="50" Height="50" HorizontalAlignment="Left" Tap="Image_Tap_1"/>
<Image Source="{Binding DownloadPhoto}" Width="40" Height="40" HorizontalAlignment="Right" Tap="Image_Tap"/>
</StackPanel>
</DataTemplate>
</phone:LongListSelector.ItemTemplate>
</phone:LongListSelector>
</phone:PanoramaItem>
This is how the PanoramaItem looks like:
I want to add a TextBox where indicated in the picture. Is it possible? If yes how? I have looked in most of the options of PanoramaItems and couldn't find TextBox item.
Try this xaml, i think you need to achieve this
<phone:PanoramaItem x:Name="Panorama2" Header="Ringtones" Margin="0,72,0,0">
<!--Double line list with image placeholder and text wrapping using a floating header that scrolls with the content-->
<StackPanel>
<phone:LongListSelector Height="362" Margin="0,-38,0,100" ItemsSource="{Binding Items2}" Tap="LongListSelector_Tap">
<phone:LongListSelector.ListHeaderTemplate>
<DataTemplate>
<Grid Margin="12,0,0,38">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
</Grid>
</DataTemplate>
</phone:LongListSelector.ListHeaderTemplate>
<phone:LongListSelector.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Margin="12,2,0,4" Height="105" Width="432">
<StackPanel Width="311" Margin="8,-7,0,0">
<TextBlock Text="{Binding LineOne}" TextWrapping="Wrap" Margin="10,0" Style="{StaticResource PhoneTextExtraLargeStyle}" FontSize="{StaticResource PhoneFontSizeLarge}"/>
<TextBlock Text="{Binding LineTwo}" TextWrapping="Wrap" Margin="10,-2,10,0" Style="{StaticResource PhoneTextSubtleStyle}" />
</StackPanel>
<Image Source="{Binding PlayPhoto}" Width="50" Height="50" HorizontalAlignment="Left" Tap="Image_Tap_1"/>
<Image Source="{Binding DownloadPhoto}" Width="40" Height="40" HorizontalAlignment="Right" Tap="Image_Tap"/>
</StackPanel>
</DataTemplate>
</phone:LongListSelector.ItemTemplate>
</phone:LongListSelector>
<TextBox Text="sfg"/>
</StackPanel>
</phone:PanoramaItem>
I want to display a list of element in a Grid. it contains two columns and two rows. Help me, please.
Item1 in Grid.row=0 Grid.column=0,
Item2 in Grid.row=0 Grid.column=1...
xaml code:
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel Orientation="Vertical" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<Grid x:Name="AllDeal" >
<Grid.RowDefinitions>
<RowDefinition Height="240"></RowDefinition>
<RowDefinition Height="240"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="229"></ColumnDefinition>
<ColumnDefinition Width="229"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Border Background="#b09f4e"></Border>
<TextBlock Foreground="Black" FontSize="48" Margin="0,10,97,164" RenderTransformOrigin="0.546,0.074" >75%</TextBlock>
<TextBlock Foreground="White" Text="{Binding Title}" Margin="0,69,22,114"></TextBlock>
<TextBlock Text="{Binding numberday}" Foreground="Blue" Margin="168,176,0,0" FontSize="24"></TextBlock>
<TextBlock Text="DAYS" Foreground="Blue" Margin="168,198,0,218" Grid.RowSpan="2"/>
<Border Grid.Column="1" Background="#b8a54b"></Border>
<TextBlock Foreground="White" Grid.Column="1" Text="{Binding Title}" Margin="0,69,22,114"></TextBlock>
<TextBlock Foreground="Black" Grid.Column="1" FontSize="48" Margin="0,10,97,164" RenderTransformOrigin="0.546,0.074" >15%</TextBlock>
<TextBlock Text="{Binding numberday}" Grid.Column="1" Foreground="Blue" Margin="168,176,0,0" FontSize="24"></TextBlock>
<TextBlock Text="DAYS" Foreground="Blue" Grid.Column="1" Margin="168,198,0,218" Grid.RowSpan="2"/>
<Border Grid.Row="1" Background="#bfb274"></Border>
<Border Grid.Column="1" Grid.Row="1" Background="#c7bc85"></Border>
<ListBoxItem>
</ListBoxItem>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
I am building an application for Windows Phone 7 where i am displaying a few data in listbox. I want to add an image after each item to distinguish it from another. My xaml code is:
<ListBox Name="listBox1" BorderThickness="0" Height="679" VerticalAlignment="Bottom" Margin="12,0,0,-29" Background="White" Grid.Row="1">
<ListBox.ItemTemplate>
<DataTemplate>
<ScrollViewer HorizontalScrollBarVisibility="Disabled" Height="80" Width="400">
<StackPanel Orientation="Horizontal" Margin="0,0,0,0" Background="White" Width="500">
<Image Source="{Binding ImageBind }" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="0,0,20,10" Height="100" Width="145" />
<StackPanel Orientation="Vertical">
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding city_name}" Foreground="Red" FontFamily="Verdana" />
<TextBlock Text=", " Foreground="Red" FontFamily="Verdana" />
<TextBlock Text="{Binding state}" Foreground="Red" FontFamily="Verdana" />
</StackPanel>
<TextBlock Text="{Binding Path=city_description}" TextWrapping="Wrap" Foreground="Black" FontFamily="Verdana"></TextBlock>
<Image Source="Image/index.jpg"/>
</StackPanel>
</StackPanel>
</ScrollViewer>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
The index.jpg image is the horizontal line i wanted to add. Please help where to add that image so that i get that image as a separator for each data
Check this:
http://social.msdn.microsoft.com/Forums/vstudio/en-US/e09926c2-5d53-4337-ba76-d1c786ec9ced/listbox-with-horizontal-lineseparator?forum=wpf
1st answer
Try something like this:
<ListBox Name="listBox1" BorderThickness="0" Height="679" VerticalAlignment="Bottom" Margin="12,0,0,-29" Background="White" Grid.Row="1">
<ListBox.ItemTemplate>
<DataTemplate>
<ScrollViewer HorizontalScrollBarVisibility="Disabled" Height="80" Width="400">
<StackPanel Orientation="Horizontal" Margin="0,0,0,0" Background="White" Width="500">
<Image Source="{Binding ImageBind }" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="0,0,20,10" Height="100" Width="145" />
<StackPanel Orientation="Vertical">
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding city_name}" Foreground="Red" FontFamily="Verdana" />
<Separator Width="{Binding ElementName=listBox1, Path=ActualWidth}"/>
<TextBlock Text=", " Foreground="Red" FontFamily="Verdana" />
<Separator Width="{Binding ElementName=listBox1, Path=ActualWidth}"/>
<TextBlock Text="{Binding state}" Foreground="Red" FontFamily="Verdana" />
<Separator Width="{Binding ElementName=listBox1, Path=ActualWidth}"/>
</StackPanel>
<TextBlock Text="{Binding Path=city_description}" TextWrapping="Wrap" Foreground="Black" FontFamily="Verdana"></TextBlock>
<Separator Width="{Binding ElementName=listBox1, Path=ActualWidth}"/>
<Image Source="Image/index.jpg"/>
</StackPanel>
</StackPanel>
</ScrollViewer>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
This will help you ;)