I have set viewmodel as page's datacontext, and binding pivot items with an Individual collection property. However the binding is working correctly when there is data, but initially when data is not available it is not working properly, I basically want to hide the textbox below the ItemsControl but don't know whats wrong with this code.
<phone:PivotItem Header="Tweets" Margin="{StaticResource PivotItemMargin}" DataContext="{Binding Tweets}">
<ScrollViewer>
<StackPanel>
<ItemsControl ItemsSource="{Binding Result}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid Margin="0,0,0,30">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="35" />
<RowDefinition Height="75" />
</Grid.RowDefinitions>
<Image Grid.Column="0" Grid.RowSpan="2" Source="{Binding userImage}" Margin="0,0,10,0" MaxWidth="100" MaxHeight="100" Stretch="UniformToFill" Visibility="{Binding userImage, Converter={StaticResource NullToVisibilityConverter}}" />
<TextBlock Grid.Column="1" Grid.Row="0" Text="{Binding name}" Foreground="{StaticResource AppForegroundHighlightTextBrush}" TextWrapping="NoWrap" TextTrimming="WordEllipsis" FontSize="{StaticResource TitleFontSize}"/>
<TextBlock Grid.Column="1" Grid.Row="1" Text="{Binding ShortTitle}" Foreground="{StaticResource AppForegroundSubtextBrush}" TextWrapping="Wrap" VerticalAlignment="Top" FontSize="{StaticResource SubtextFontSize}"/>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
<TextBlock DataContext="{Binding Tweet}" Grid.Row="2" Text="all Tweets" FontWeight="Bold" Visibility="{Binding hasMore,Converter={StaticResource BooleanToVisibilityConverter}}"/>
</StackPanel>
</ScrollViewer>
</phone:PivotItem>
When DataContext is null, binding will use value specified in TargetNullValue property. Therefore, try to set TargetNullValue property of Visibility binding to Collapsed and you won't even need converter :
.......
<Image
.......
Visibility="{Binding userImage, TargetNullValue=Collapsed}"
/>
.......
Related
I have written a DataTemplate in App.xaml.
<DataTemplate x:Key="PlayDVBViewer">
<GroupBox Header="{x:Static properties:Resources.PlayInDVBViewer}" UseLayoutRounding="True" Margin="5">
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<TextBlock Text="{x:Static properties:Resources.ChooseDVBViewer}" Margin="5" VerticalAlignment="Center"/>
<ComboBox Grid.Row="1" ItemsSource="{Binding Clients.Items}" SelectedItem="{Binding Client}" SelectedValuePath="Name" DisplayMemberPath="Name" Margin="5" Padding="5" VerticalAlignment="Center" Background="Transparent"/>
<!--<Button Grid.Column="1" Grid.Row="1" x:Name="btnPlay" Click="BtnPlay_Click" Margin="5" Padding="5" VerticalAlignment="Center" Background="Transparent" Content="{x:Static properties:Resources.Playback}"/>-->
<Button Grid.Column="1" Grid.Row="1" Command="{Binding BtnPlayClick}" Margin="5" Padding="5" VerticalAlignment="Center" Background="Transparent" Content="{x:Static properties:Resources.Playback}"/>
</Grid>
</GroupBox>
</DataTemplate>
The template works correctly in a page. But on the same page, in a DataGrid, it doesn't work. Why?
<!--Wiedergabe Optionen -->
<GroupBox Header="{x:Static properties:Resources.Playback}" Grid.Row="1" Grid.Column="2" Margin="5">
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<ContentPresenter Grid.Row="0" ContentTemplate="{StaticResource ResourceKey=PlayDVBViewer}" Content="{Binding}"/>
</Grid>
</GroupBox>
<DataGrid.RowDetailsTemplate>
<DataTemplate>
<Grid>
<!-- Detail Grid mit den Buttons zum Abspielen -->
<Grid Grid.Row="0">
<StackPanel Orientation="Horizontal">
<GroupBox Header="{x:Static properties:Resources.Picture}" MinWidth="120" Margin="5">
<Image Height="64" Source="{Binding ImagePath, Mode=OneWay, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type local:PageAufnahmen}}}" Margin="5"/>
</GroupBox>
<ContentPresenter ContentTemplate="{StaticResource PlayDVBViewer}"/>
</StackPanel>
</Grid>
</Grid>
</DataTemplate>
</DataGrid.RowDetailsTemplate>
Ok, I have found the error.
If you use ContentPresenter in the DataTemplate of a grid. The binding will bind to the selected item. The solution is, use the same binding, like the image in the last box, see my post above.
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>
I've got 2 listbox and one scrollviewer and I want the scrollviewer to scroll the two listbox together. But i don't know how to do.. Here's my xaml :
<ScrollViewer Grid.Row="1">
<Grid>
<ListBox Name="listboxRSSFeedItems" Width="240" Height="644" Margin="0,0,240,0">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<TextBlock TextWrapping="Wrap" Text="{Binding Title}" Grid.Row="0" FontSize="24" HorizontalAlignment="Left" />
<HyperlinkButton Content="Link to details" NavigateUri="{Binding Link}" HorizontalAlignment="Left" Grid.Row="1" Margin="0,0,0,30" />
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<ListBox Name="listboxRSSFeedItems2" Width="240" Height="644" Margin="240,0,0,0">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<TextBlock TextWrapping="Wrap" Text="{Binding Title}" Grid.Row="0" FontSize="24" HorizontalAlignment="Left" />
<HyperlinkButton Content="Link to details" NavigateUri="{Binding Link}" HorizontalAlignment="Left" Grid.Row="1" Margin="0,0,0,30" />
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
</ScrollViewer>
Thanks a lot
Ok. I just tried to do one listbox with grid. it works fine, but how to choose which grid to add my item.
I used to add with "listboxRSSFeedItems.Items.Add(item)", but now, how can i choose the 2nd Column only.
<ScrollViewer Grid.Row="1">
<ListBox x:Name="listboxRSSFeedItems" Width="480" Height="680">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid x:Name="first" Grid.Column="0">
<TextBlock TextWrapping="Wrap" Text="{Binding Title}" />
<HyperlinkButton NavigateUri="{Binding URL}" TargetName="_blank"/>
</Grid>
<Grid x:Name="second" Grid.Column="1">
<TextBlock TextWrapping="Wrap" Text="{Binding Title}" />
<HyperlinkButton NavigateUri="{Binding URL}" TargetName="_blank" />
</Grid>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</ScrollViewer>
Thanks again
You shouldn't set height of your listBoxes.
ps: Consider layout using columns
<ScrollViewer >
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<ListBox x:Name="first" Grid.Column="0" />
<ListBox x:Name="second" Grid.Column="1" />
</Grid>
</ScrollViewer>
Set VerticalScrollBarVisibility to "Disabled" for listBoxes.
And it will be better using StackPanel for this puprose instead of Grid.
I am trying to bind a property ObservableCollection<ObservableCollection<Location>> to a ListBox with ItemTemplate of ListBox which in-turn has an ItemTemplate that is a grid. The layout of the listbox within a listbox seems to work fine. However, I am having issues with my databinding.
For the second layer listbox ItemsSource I have tried binding using the Collection Current Item Bindings ItemSource="{Binding /}" and using ItemsSource="{TemplateBinding /}". I new to WPF and am using MVVM, so any tips and/or criticism are appreciated.
<ListBox Grid.Row="4" Width="610" Height="600" HorizontalContentAlignment="Stretch" ItemsSource="{Binding CurrentLocation.Children}">
<ListBox.ItemTemplate>
<DataTemplate>
<ListBox Width="550" Height="100" Margin="5" HorizontalContentAlignment="Stretch" ItemsSource="{Binding /}" >
<ListBox.ItemTemplate>
<DataTemplate>
<Grid HorizontalAlignment="Stretch" Margin="5">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="3*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<TextBlock Grid.Column="0" Grid.Row="0" Margin="5" Text="Name:" />
<TextBlock Grid.Column="0" Grid.Row="1" Margin="5" Text="Description:" />
<TextBlock Grid.Column="1" Grid.Row="0" Margin="5" Text="{Binding Name}" />
<TextBlock Grid.Column="1" Grid.Row="1" Margin="5" Text="{Binding Description}" TextWrapping="Wrap" />
<Button Grid.Column="2" Grid.Row="0" Command="{Binding TODO}">
<TextBlock Text="Edit"/>
</Button>
<Button Grid.Column="2" Grid.Row="1" Command="{Binding TODO}">
<TextBlock Text="Delete"/>
</Button>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Each ListBoxItem contains the DataContext of whatever the object is in the parent collection, so you should be fine to specify nothing in the Binding.
<ListBox ItemsSource="{Binding MyCollectionOfCollections}">
<ListBox.ItemTemplate>
<DataTemplate>
<!-- DataContext of each item will an inner ObservableCollection<Location> -->
<ListBox ItemsSource="{Binding }" />
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
The correct notation for binding to the current DataContext as a whole is {Binding}.
<ListBox ... ItemsSource="{Binding CurrentLocation.Children}">
<ListBox.ItemTemplate>
<DataTemplate>
<ListBox ... ItemsSource="{Binding}" >
<ListBox.ItemTemplate>
<DataTemplate>
<Grid HorizontalAlignment="Stretch" Margin="5">
<!-- snip -->
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<DataTemplate x:Key="tmpGrdProducts">
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Image Grid.RowSpan="6" Width="200" Height="200" Grid.Column="0" Grid.Row="0"></Image>
<TextBlock Grid.ColumnSpan="2" Grid.Row="0" Grid.Column="1" Text="{Binding ProductName}" Foreground="Red"></TextBlock>
<!-- Labels-->
<TextBlock Text="SKU" Foreground="Red" Grid.Column="1" Grid.Row="1"></TextBlock>
<TextBlock Text="Code" Foreground="Red" Grid.Column="1" Grid.Row="2"></TextBlock>
<TextBlock Text="Mark" Foreground="Red" Grid.Column="1" Grid.Row="3"></TextBlock>
<TextBlock Text="Model" Foreground="Red" Grid.Column="1" Grid.Row="4"></TextBlock>
<!-- Data-->
<TextBlock Text="{Binding SKU}" Foreground="Black" Grid.Column="1" Grid.Row="1"></TextBlock>
<TextBlock Text="{Binding ProductCode}" Foreground="Black" Grid.Column="1" Grid.Row="2"></TextBlock>
<TextBlock Text="{Binding Mark}" Foreground="Black" Grid.Column="1" Grid.Row="3"></TextBlock>
<TextBlock Text="{Binding Model}" Foreground="Black" Grid.Column="1" Grid.Row="4"></TextBlock>
</Grid>
</DataTemplate>
</Page.Resources>
<Grid x:Name="grdProduct" DataContext="Binding">
<ItemsControl>
<ItemsControl ItemTemplate="{StaticResource tmpGrdProducts}"></ItemsControl>
</ItemsControl>
</Grid>
source code
var Products = from t in bsEntity.ProductsTemps select t;
grdProduct.DataContext = Products;
Thank you.
You need to bind the ItemsSource property of your ItemsControl to the collection.
Also inside your items control, you've declared an extra items control with the item template.
What you're looking for is something like:
<ItemsControl ItemsSource="{Binding Path=YourCollectionProperty}">
<ItemsControl.ItemTemplate>
<!--your data template here-->
</ItemsControl.ItemTemplate>
</ItemsControl>
Also, I don't think you want DataContext="Binding" on your grid. If at all you'll probably need DataContext="{Binding}"