My problem is this:
I got this ListView -
<ListView ItemsSource="{Binding GameRow1}" ItemTemplate="{StaticResource GamePiecesTemplate}" VerticalAlignment="Bottom" Grid.Column="12" Grid.Row="1" />
and I got this Image -
<Image Grid.Column="12" Grid.Row="1" Source="/Images/Gray_triangle2.png" Stretch="Fill"/>
The problem is that the Image covers my ListView and I can't the ListView items. is there a way to set picture to be on a grid cell as background?
this is the ItemTemplate btw:
<DataTemplate x:Key="GamePiecesTemplate">
<StackPanel>
<Image Source="{Binding IsWhite , Converter={StaticResource GamePiceToImgSrc}}" Height="50" Width="50" ></Image>
<Label HorizontalAlignment="Center" Content="{Binding Path=UserName}" />
</StackPanel>
</DataTemplate>
Related
I want to show multiple images one after one vertically. That's why I've implemented Nested grid. It works fine for same height images. but different height images it looks odd because in nested grid height set according to first item height. Here is my code:
<DataTemplate x:Key="ImageTemplate">
<Grid x:Name="ImageGridViewItem"
HorizontalAlignment="Center"
Padding="0,0,0,0"
Background="#FAFAFA"
BorderBrush="#E6E6E6"
BorderThickness="0,0,0,0">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid Background="#FAFAFA"
VerticalAlignment="Center"
HorizontalAlignment="Center"
BorderThickness="1">
<Image Source="{Binding ImageSource, Mode=OneWay}"
Stretch="Uniform"
Width="{Binding ImageSource.PixelWidth, Mode=OneWay}"
Height="{Binding ImageSource.PixelHeight, Mode=OneWay}"/>
</Grid>
<Grid Grid.Row="1"
Background="#F5F5F5"
Padding="0,0,0,0">
<TextBlock x:Name="ImageNoTxtBox"
HorizontalAlignment="Left"
VerticalAlignment="Bottom"
Margin="0,4,0,0"
Padding="0"
FontFamily="Segoe UI"
FontSize="10"
FontWeight="Normal"
Foreground="#252525"
Text="{Binding ImageNo,Mode=TwoWay}">
</TextBlock>
</Grid>
</Grid>
<GridView x:Name="ImagesGridView"
Grid.Row="5"
Margin="12,0,2,0"
Padding="10,10,0,0"
Width="{Binding MainGridViewWidth}"
ItemsSource="{Binding ImageList, Mode=OneWay}"
ItemTemplate="{StaticResource ImageTemplate}">
</GridView>
Image
As you mentioned, the row height of GridView depends on the first item, if you want to show the Variable height in GridView, you can try to use WrapPanel from Windows Community Toolkit. Before using it, you need to add Microsoft.Toolkit.Uwp.UI.Controls nuget package and then override the ItemsPanel of GridView, for example:
.xaml:
xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls"
<GridView x:Name="ImagesGridView"
Grid.Row="5"
Margin="12,0,2,0"
Padding="10,10,0,0"
Width="{Binding MainGridViewWidth}"
ItemsSource="{Binding ImageList, Mode=OneWay}"
ItemTemplate="{StaticResource ImageTemplate}">
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<controls:WrapPanel Name="VerticalWrapPanel" Orientation="Vertical" />
</ItemsPanelTemplate>
</GridView.ItemsPanel>
</GridView>
my list view inside the split view is not scrolling.
XAML code of total page goes like below.
<SplitView ScrollViewer.IsVerticalRailEnabled="True" BorderBrush="White" BorderThickness="1" x:Name="windowssplit1" DisplayMode="Overlay" Margin="40,-95,0,-200" Width="340" HorizontalAlignment="Left" x:FieldModifier="Public" Grid.RowSpan="2">
<SplitView.Pane>
<!--<Grid Background="Gray" ScrollViewer.VerticalScrollMode="Enabled" ScrollViewer.IsVerticalScrollChainingEnabled="True">-->
<StackPanel Background="Gray" BorderBrush="White" BorderThickness="1" ScrollViewer.VerticalScrollBarVisibility="Auto" ScrollViewer.IsVerticalScrollChainingEnabled="True" Margin="0,49,0,-162">
<TextBlock Text="All Ages" Margin="20,10,0,10" Foreground="White" FontSize="20" />
<Border BorderThickness="0.4" BorderBrush="White" Margin="20,0,0,10" Width="280" HorizontalAlignment="Left"/>
<ListView x:Name="filterlist1" Margin="10,0,0,0" ScrollViewer.VerticalScrollMode="Enabled" ScrollViewer.IsVerticalRailEnabled="True" SelectionChanged="filterlist_SelectionChanged">
<ListView.ItemTemplate>
<DataTemplate>
<TextBlock FontSize="18" Margin="0,10,0,0" Foreground="White" Text="{Binding CategoryName}"/>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<!--</Grid>-->
</StackPanel>
</SplitView.Pane>
</SplitView>
The List View present in the Bolded Code must Scroll how this can be done, Help me....
How to make the List scroll
i think you need to put your listview inside a scrolViwer !
I believe this has to do with the panel that the ListView is in. Set the ListView to have a 'fixed' MaxHeight so that it can know when to scroll.
<ListView x:Name="filterlist1" Margin="10,0,0,0"
ScrollViewer.VerticalScrollMode="Enabled"
ScrollViewer.IsVerticalRailEnabled="True"
SelectionChanged="filterlist_SelectionChanged"
MaxHeight="400">
<ListView.ItemTemplate>
<DataTemplate>
<TextBlock FontSize="18" Margin="0,10,0,0" Foreground="White" Text="{Binding CategoryName}"/>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
To make the ListView scrollable, we need give the ListView a explicit height or use a layout that can limit the height of ListView.
StackPanel is not suitable for this scenario as it won't limit the size of ListView. All items are showed in the ListView, but only these items in StackPanel can be seen.
We can use Grid instead of StackPanel and try with following code:
<SplitView x:Name="windowssplit1"
Grid.RowSpan="2"
Width="340"
HorizontalAlignment="Left"
BorderBrush="White"
BorderThickness="1"
DisplayMode="Overlay"
IsPaneOpen="True"
x:FieldModifier="Public">
<SplitView.Pane>
<Grid Background="Gray">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<TextBlock Margin="20,10,0,10"
FontSize="20"
Foreground="White"
Text="All Ages" />
<Border Width="280"
Margin="20,0,0,10"
HorizontalAlignment="Left"
BorderBrush="White"
BorderThickness="0.4" />
<ListView x:Name="filterlist1"
Grid.Row="1"
Margin="10,0,0,0"
SelectionChanged="filterlist_SelectionChanged">
<ListView.ItemTemplate>
<DataTemplate>
<TextBlock Margin="0,10,0,0"
FontSize="18"
Foreground="White"
Text="{Binding CategoryName}" />
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
</SplitView.Pane>
</SplitView>
Here I set two rows in Grid and put the ListView in the second row. Second row's Height is set to * so it can get the rest Height of the Grid. I also remove the Margin in SplitView to see the scroll bar clearly.
I'm trying to highlight the selected item in a bridview from a windows application.
To be more precise:
<GridView
x:Name="itemGridView"
AutomationProperties.AutomationId="ItemsGridView"
AutomationProperties.Name="Items"
TabIndex="1"
Grid.RowSpan="2"
Padding="116,136,116,46"
SelectionMode="None"
IsSwipeEnabled="false"
IsItemClickEnabled="True"
ItemClick="openRessource"
ItemsSource="{Binding Source={StaticResource itemsViewSource}}">
<GridView.ItemTemplate>
<DataTemplate>
<Grid HorizontalAlignment="Left" Width="200" Height="250" Holding="openHoldMenu">
<Border Background="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}">
<Image Source="{Binding icon}" Stretch="None"/>
</Border>
<Image Source="{Binding downloaded}" Width="30" Height="30" Margin="5" HorizontalAlignment="Right" VerticalAlignment="Top"/>
<StackPanel VerticalAlignment="Bottom" Background="{ThemeResource ListViewItemOverlayBackgroundThemeBrush}">
<TextBlock Text="{Binding Mode=OneWay}" Foreground="{ThemeResource ListViewItemOverlayForegroundThemeBrush}" Style="{StaticResource BaseTextBlockStyle}" Height="60" Margin="15,0,15,0" FontWeight="SemiBold"/>
<TextBlock Text="{Binding description, Mode=OneWay}" Foreground="{ThemeResource ListViewItemOverlaySecondaryForegroundThemeBrush}" Style="{StaticResource BaseTextBlockStyle}" TextWrapping="NoWrap" Margin="15,0,15,10" FontSize="12"/>
</StackPanel>
</Grid>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
This is my XAML, fairly simple, I just have a Holding event which brings up a menu in my page.
My problem is that I want to know which item has been held to create a border around it so that the user knows which item is selected.
I can easily access the bound item in my list but can't get the grid element selected.
If anyone know how to, that would be really appreciated.
Thank you!
Should be able to make a trigger such as this:
http://stackoverflow.com/questions/4539909/wpf-datagrid-selected-row-style
I've Bind some image in a Listbox, when I will tap on a bind image that will be set in main image by source from bind image source.
This is the code where I want to show the image from Binding data.
<Grid x:Name="Icon" Margin="134,51,173,556">
<Image x:Name="MyIconImage" HorizontalAlignment="Left" Height="90" Width="93" Source="" />
</Grid>
Here is the code where I've bind the data
<Grid Margin="0,366,0,0">
<ListBox x:Name="List"
ItemsSource="{Binding ListItemSource}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel>
<Image x:Name="IconListImage" Source="{Binding IconPath}" Width="48" Height="48" Tap="IconListImage_Tap"/>
<TextBlock x:Name="appName" Text="{Binding AppName}"/>
<TextBlock Text="{Binding IconPath}"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
Did you try SelectedValuePath?
<Image x:Name="MyIconImage" HorizontalAlignment="Left" Height="90" Width="93" Source="{Binding ElementName=List, Path=SelectedValue}" />
<ListBox x:Name="List" ItemsSource="{Binding ListItemSource}" SelectedValuePath="IconPath">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel>
<Image x:Name="IconListImage" Source="{Binding IconPath}" Width="48" Height="48" Tap="IconListImage_Tap"/>
<TextBlock x:Name="appName" Text="{Binding AppName}"/>
<TextBlock Text="{Binding IconPath}"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
I am using a WrapPanel with an Image and Label, but the Label shows up to the right of the item. How can I make it show up at the bottom of the Image/Item?
<Window.Resources>
<DataTemplate x:Key="ItemTemplate">
<WrapPanel Orientation="Horizontal">
<Image Width="50" Height="50" Stretch="Fill" Source="{Binding Cover}"/>
<Label Content="{Binding Title}" />
</WrapPanel>
</DataTemplate>
</Window.Resources>
Change:
Orientation="Horizontal"
To:
Orientation="Vertical"
I don't think any further explanation is needed!