I have a list of products, and I want them to have diferents images, how do I bind an image so that each of my products in the list have a diferent image?
<PivotItem Header="Lista">
<ListView x:Name="List1" ItemsSource="{x:Bind ProdutoViewModel.Produtos}">
<ListView.ItemTemplate>
<DataTemplate x:DataType="list:Produto">
<ListView>
<StackPanel>
<TextBlock Text="{x:Bind Nome, Mode=OneWay}" Margin="100,10,10,10"/>
<TextBlock Text="{x:Bind Preco, Mode=OneWay}" Margin="100,10,10,10"/>
<TextBlock Text="{x:Bind Disponivel, Mode=OneWay}" Margin="100,10,10,10"/>
<TextBlock Text="{x:Bind Fornecedor, Mode=OneWay}" Margin="100,10,10,10"/>
<TextBlock Text="{x:Bind Categoria, Mode=OneWay}" Margin="100,10,10,10"/>
<Image Source="Assets/mouse.png" Height="50" Width="80" Margin="10,-300,100,10"/>
<Image Source="Assets/teclado.png" Height="50" Width="80" Margin="10,-100,100,10"/>
</StackPanel>
</ListView>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Related
I am trying to display an selected listview item in a ContentPresenter.
The ListView is populated from the PlayersViewModel. The items presenting a PlayerViewModel.
Now I want to display the selected PlayerViewModel outside the ListView in an ContentPresenter. In the design view only the Content binded type is shown. Like: PlayersViewModel.CurrentPlayer.
How can I make the ContentPresenter work the same way as the ListView.ItemTemplate?
Thanks in advance.
<ListView ItemsSource="{x:Bind PlayersViewModel.Players}" SelectedIndex="{x:Bind PlayersViewModel.Index}" Grid.Row="0" Grid.Column="0" Grid.RowSpan="2">
<ListView.ItemTemplate>
<DataTemplate x:DataType="viewModels:PlayerViewModel">
<Viewbox>
<StackPanel BorderBrush="Black" BorderThickness="1">
<TextBlock Text="{x:Bind Name}" />
<TextBlock Text="{x:Bind Score, Mode=TwoWay}" />
</StackPanel>
</Viewbox>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<ContentPresenter Grid.Row="0" Grid.Column="1" Content="{x:Bind PlayersViewModel.CurrentPlayer}">
<ContentPresenter.Resources>
<DataTemplate x:Key="dataTemplateCurrentPlayer" x:DataType="viewModels:PlayerViewModel">
<StackPanel BorderBrush="Black" BorderThickness="1">
<TextBlock Text="{x:Bind Name}" />
<TextBlock Text="{x:Bind Score, Mode=TwoWay}" />
</StackPanel>
</DataTemplate>
</ContentPresenter.Resources>
</ContentPresenter>
<UserControl x:Class="App1.MyUserControl1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App1"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="300"
d:DesignWidth="400">
<UserControl.Resources>
<DataTemplate x:DataType="viewModels:PlayerViewModel"
x:Key="PlayerTemplate">
<Viewbox>
<StackPanel BorderBrush="Black"
BorderThickness="1">
<TextBlock Text="{x:Bind Name}" />
<TextBlock Text="{x:Bind Score, Mode=TwoWay}" />
</StackPanel>
</Viewbox>
</DataTemplate>
</UserControl.Resources>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.5*" />
<ColumnDefinition Width="0.5*" />
</Grid.ColumnDefinitions>
<ListView ItemsSource="{x:Bind PlayersViewModel.Players}"
SelectedIndex="{x:Bind PlayersViewModel.Index}"
ItemTemplate="{StaticResource PlayerTemplate}" />
<ContentControl Grid.Column="1"
Content="{x:Bind PlayersViewModel.CurrentPlayer}"
ContentTemplate="{StaticResource PlayerTemplate}" />
</Grid>
</UserControl>
You can use ListView Footer Template to show detailed information of selected item
<ListView ItemsSource="{x:Bind PlayersViewModel.Players}" SelectedIndex="{x:Bind PlayersViewModel.Index}" Grid.Row="0" Grid.Column="0" Grid.RowSpan="2">
<ListView.ItemTemplate>
<DataTemplate x:DataType="viewModels:PlayerViewModel">
<Viewbox>
<StackPanel BorderBrush="Black" BorderThickness="1">
<TextBlock Text="{x:Bind Name}" />
<TextBlock Text="{x:Bind Score, Mode=TwoWay}" />
</StackPanel>
</Viewbox>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.FooterTemplate>
<DataTemplatex:DataType="viewModels:PlayerViewModel">
<StackPanel BorderBrush="Black" BorderThickness="1">
<TextBlock Text="{x:Bind PlayersViewModel.CurrentPlayer.Name}" />
<TextBlock Text="{x:Bind PlayersViewModel.CurrentPlayer.Score, Mode=TwoWay}" />
</StackPanel>
</DataTemplate>
</ListView.FooterTemplate>
</ListView>
Or other way is you can use just Stackpanel
<StackPanel BorderBrush="Black" BorderThickness="1">
<TextBlock Text="{x:Bind PlayersViewModel.CurrentPlayer.Name}" />
<TextBlock Text="{x:Bind PlayersViewModel.CurrentPlayer.Score, Mode=TwoWay}" />
</StackPanel>
Hope this works..
So I'm having a issue with GroupHeaderPlacement and Vertical scrolling.
What Im trying to achieve is this:
But for some reason my groups are getting arranged in a horisontal scrolling direction. Anyone know if I'm missing something obvious here or if you simple can't have a vertical scrolling Listview if you have GroupHeaderPlacement Left.
The Code is:<ListView x:Name="ItemsGridView"
Margin="118,-5,0,0"
ItemsSource="{Binding Source={StaticResource AllCurrentGroup}}"
SelectionMode="Single"
Grid.Row="2"
Grid.Column="0"
ShowsScrollingPlaceholders="False"
SelectionChanged="SelectedPresentationItem_SelectionChanged"
IsSwipeEnabled="True">
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsWrapGrid GroupHeaderPlacement="Left" Orientation="Vertical" />
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Grid.Column="1" Height="80" Margin="40,0,0,0" >
<TextBlock Text="{Binding Tid }" Style="{StaticResource BodyTextBlockStyle}" Grid.Column="1" >
<TextBlock.Foreground>
<SolidColorBrush Color="{StaticResource Orange}"/>
</TextBlock.Foreground>
</TextBlock>
<TextBlock Text="{Binding Titel }" Style="{StaticResource SubheaderTextBlockStyle}" Grid.Column="1" />
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<StackPanel Grid.Column="0" Grid.RowSpan="{Binding Rows}" Width="160" Height="200">
<StackPanel.Background>
<SolidColorBrush Color="{StaticResource BlueDark}"/>
</StackPanel.Background>
<TextBlock Text="{Binding Vecka, Converter={StaticResource ToWeekString }}" Style="{StaticResource BodyTextBlockStyle}" Foreground="#FFFFFFFF" HorizontalAlignment="Left" VerticalAlignment="Top" FontFamily="Global User Interface" Margin="20,13,0,0"/>
<TextBlock Text="{Binding Datum, Converter={StaticResource ToDayNumber }}" Style="{StaticResource HeaderTextBlockStyle}" Foreground="#FFFFFFFF" HorizontalAlignment="Left" Margin="20,26,0,0"/>
<TextBlock Text="{Binding Datum, Converter={StaticResource ToMonth }}" Style="{StaticResource SubheaderTextBlockStyle}" Foreground="#FFFFFFFF" HorizontalAlignment="Left" VerticalAlignment="Top" FontFamily="Global User Interface" Margin="20,-3,0,0"/>
<TextBlock Text="{Binding Datum, Converter={StaticResource ToDayString }}" Style="{StaticResource BodyTextBlockStyle}" Foreground="#FFFFFFFF" HorizontalAlignment="Left" VerticalAlignment="Top" FontFamily="Global User Interface" Margin="20,13,0,0"/>
</StackPanel>
</DataTemplate>
</GroupStyle.HeaderTemplate>
<GroupStyle.Panel>
<ItemsPanelTemplate>
<WrapGrid Orientation="Vertical"></WrapGrid>
</ItemsPanelTemplate>
</GroupStyle.Panel>
</GroupStyle>
</ListView.GroupStyle>
</ListView>
http://code.msdn.microsoft.com/windowsapps/GroupedGridView-77c59e8e/sourcecode?fileId=44751&pathId=298223712
Please refer the above sample link which helps you to achieve your req.
In my WP8 project textblock is cutting text unexpectedly. How can I solve it? I have used VerticalAlignment Strecth or Height auto in scrollviewer but they have not solve it.
And my xaml, I am using one of these stackpanels :
<ScrollViewer>
<Grid>
<StackPanel x:Name="stackNormal" Visibility="Collapsed" VerticalAlignment="Top" Background="Transparent">
<ListBox Name="ImageList" ItemsSource="{Binding Summary.Text , Converter={StaticResource ImageFromRssText}}" ScrollViewer.VerticalScrollBarVisibility="Disabled">
<ListBox.ItemTemplate>
<DataTemplate>
<Image Source="{Binding URL}" Tag="{Binding Title}" Margin="5,15,0,0"></Image>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<TextBlock TextDecorations="Underline" MouseLeftButtonUp="feedTitle_MouseLeftButtonUp" FontSize="25" Name="feedTitle" TextWrapping="Wrap" HorizontalAlignment="Stretch" Foreground="{StaticResource PhoneAccentBrush}" Text="{Binding Title.Text, Converter={StaticResource RssTextTrimmer}}" VerticalAlignment="Top" Margin="5,3,0,2" />
<TextBlock Name="feedSummary" TextWrapping="Wrap" Margin="5,0,15,0" Text="{Binding Summary.Text, Converter={StaticResource RssTextTrimmerLong}}" HorizontalAlignment="Stretch" FontSize="20" VerticalAlignment="Stretch"/>
<TextBlock Name="feedPubDate" Foreground="{StaticResource PhoneSubtleBrush}" Margin="12,20,0,5" Text="{Binding PublishDate.DateTime}" HorizontalAlignment="Center" />
</StackPanel>
<StackPanel x:Name="stackPhotoBug" Visibility="Collapsed" VerticalAlignment="Top" Background="Transparent">
<ListBox Name="ImageList2" ItemsSource="{Binding Links}" ScrollViewer.VerticalScrollBarVisibility="Disabled">
<ListBox.ItemTemplate>
<DataTemplate>
<Image Source="{Binding Converter={StaticResource ImagesFromRssTextForPhotoBug}}" HorizontalAlignment="Stretch" Margin="5,15,0,0" MaxHeight="500"></Image>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<TextBlock TextDecorations="Underline" MouseLeftButtonUp="feedTitle_MouseLeftButtonUp" FontSize="25" Name="feedTitle2" TextWrapping="Wrap" HorizontalAlignment="Stretch" Foreground="{StaticResource PhoneAccentBrush}" Text="{Binding Title.Text, Converter={StaticResource RssTextTrimmer}}" VerticalAlignment="Top" Margin="5,3,0,2" />
<TextBlock Name="feedSummary2" TextWrapping="Wrap" Margin="5,0,15,0" Text="{Binding Summary.Text, Converter={StaticResource RssTextTrimmerLong}}" HorizontalAlignment="Stretch" FontSize="20" VerticalAlignment="Stretch"/>
<TextBlock Name="feedPubDate2" Foreground="{StaticResource PhoneSubtleBrush}" Margin="12,20,0,5" Text="{Binding PublishDate.DateTime}" HorizontalAlignment="Center" />
</StackPanel>
</Grid>
</ScrollViewer>
Maybe it is because of such big text (TextBlock has limit - 2048px). You should try ScrollableTextBlock
Place the textblock inside scrollviewer
<scrollviewer verticalBarvisibility="visible">
<TextBlock Name="feedSummary" TextWrapping="Wrap"
Text="{Binding Summary.Text, Converter={StaticResource RssTextTrimmerLong}}"
HorizontalAlignment="Stretch" FontSize="20"
VerticalAlignment="Stretch"/>
</scrollviewer>
Any element that must be displayed beyond the area which is larger than 2048x2048 pixels would be clipped by the platform
Creating Scrollable TextBlock for WP7.
I want to align the contents or items of ExpanderView in horizontal layout instead of vertical layout. The ExpanderHeader is set dynamically and also its contents are added dynamically.
The xaml part and CustomeItemTemplate in app.xaml is as below
<toolkit:ExpanderView
Width="470"
Header="{Binding TaskName, Mode=TwoWay}"
x:Name="taskNameExpander"
Margin="5,10,5,10"
Foreground="#FF677389" FontSize="24" VerticalAlignment="Top"
HorizontalAlignment="Left"
ItemsSource="{Binding dateTime}"
ItemTemplate="{StaticResource CustomItemTemplate}"
HorizontalContentAlignment="Left">
</toolkit:ExpanderView>
<DataTemplate x:Key="CustomItemTemplate">
<StackPanel Orientation="Horizontal" Height="60" >
<TextBlock FontSize="16" Text="{Binding Date, Mode=OneWay}"
TextWrapping="Wrap" Foreground="#FF677389" Margin="0,6,0,0" Height="30" Width="100"/>
<TextBox BorderBrush="Goldenrod" BorderThickness="1" FontSize="16" Text="{Binding Time, Mode=TwoWay}" TextWrapping="Wrap" Foreground="#FF677389" Margin="0" Height="60" Width="150"/>
</StackPanel>
</DataTemplate>
Still i get the contents aligned vertically. Can someone point me what am i doing wrong here?
here is the sample code you have asked for
<Border BorderBrush="White" BorderThickness="1" Margin="5">
<ScrollViewer Width="Auto" HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Disabled">
<toolkit:ExpanderView
Width="1600"
Header="{Binding TaskName, Mode=TwoWay}"
x:Name="taskNameExpander" Margin="5,10,5,10" Foreground="#FF677389" FontSize="24" VerticalAlignment="Top" HorizontalAlignment="Left"
ItemsSource="{Binding dateTime}"
ItemTemplate="{StaticResource CustomItemTemplate}"
ScrollViewer.HorizontalScrollBarVisibility="Visible"
HorizontalContentAlignment="Left">
<toolkit:ExpanderView.ItemsPanel>
<ItemsPanelTemplate >
<StackPanel Orientation="Horizontal" Width="Auto" ScrollViewer.HorizontalScrollBarVisibility="Visible"/>
</ItemsPanelTemplate>
</toolkit:ExpanderView.ItemsPanel>
</toolkit:ExpanderView>
</ScrollViewer>
</Border>
and my app.xaml has CustomItemTemplate definition as below
<DataTemplate x:Key="CustomItemTemplate">
<StackPanel Orientation="Vertical" Height="100" >
<TextBlock FontSize="16" Text="{Binding Date, Mode=OneWay}" TextWrapping="Wrap" Foreground="#FF677389" Margin="0,6,0,0" Height="30" Width="100"/>
<TextBox BorderBrush="Goldenrod" BorderThickness="1" FontSize="16" Text="{Binding Time, Mode=TwoWay}" TextWrapping="Wrap" Foreground="#FF677389" Margin="0" Height="60" Width="150">
<TextBox.InputScope>
<InputScope >
<InputScopeName NameValue="Number"></InputScopeName>
</InputScope>
</TextBox.InputScope>
</TextBox>
</StackPanel>
</DataTemplate>
I want to horizontally scroll only ExpanderView items. Rightnow it is scrolling but the whole ExpanderView is scrolling including its header. The header must be intact and only the items must scroll. How can i acheive it?
You should set the ItemsPanel for the ExpanderView control.
<toolkit:ExpanderView
Width="470" Height="100"
x:Name="taskNameExpander"
Margin="5,10,5,10"
FontSize="24" Background="White"
HorizontalAlignment="Left"
ItemsSource="1 2 3 4"
ItemTemplate="{StaticResource CustomItemTemplate}"
HorizontalContentAlignment="Left">
<toolkit:ExpanderView.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</toolkit:ExpanderView.ItemsPanel>
</toolkit:ExpanderView>
I am getting the following error with my code shown below.
Error:
The property 'Content' is set more than once
Code:
<controls:PanoramaItem Header="headlines">
<TextBlock Text="{Binding Tones}" />
<ListBox Margin="0,0,-12,0" ItemsSource="{Binding Tones}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Margin="0,0,0,17">
<Image Source="{Binding ImageUrl}" Height="75" Width="100"
Margin="12,10,9,0" VerticalAlignment="Top"/>
<StackPanel Width="311">
<TextBlock Text="{Binding Title}" TextWrapping="Wrap"
Style="{StaticResource PhoneTextLargeStyle}" />
</StackPanel>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</controls:PanoramaItem>
A PanoramaItem can only have one child control but you currently have a TextBlock and a ListBox. To fix this, simply add another parent control to hold the TextBlock and ListBox (such as a StackPanel or a Grid). For example:
<controls:PanoramaItem Header="headlines">
<grid>
<TextBlock Text="{Binding Tones}" />
<!--Double line list with image placeholder and text wrapping-->
<ListBox Margin="0,0,-12,0" ItemsSource="{Binding Tones}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Margin="0,0,0,17">
<!--Replace rectangle with image-->
<Image Source="{Binding ImageUrl}" Height="75" Width="100" Margin="12,10,9,0" VerticalAlignment="Top"/>
<!--<Rectangle Height="100" Width="100" Fill="#FFE5001b" Margin="12,0,9,0"/>-->
<StackPanel Width="311">
<TextBlock Text="{Binding Title}" TextWrapping="Wrap" Style="{StaticResource PhoneTextLargeStyle}"/>
<!--<TextBlock Text="{Binding LineTwo}" TextWrapping="Wrap" Margin="12,-6,12,0" Style="{StaticResource PhoneTextSubtleStyle}"/>-->
</StackPanel>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</grid>
</controls:PanoramaItem>