Reorder GridView with buttons - c#

I have a GridView like this:
<GridView SelectionMode="None" ItemsSource="{x:Bind Bla}" CanReorderItems="True" AllowDrop="True" CanDragItems="True">
<GridView.ItemTemplate>
<DataTemplate x:DataType="local:BlaType">
<Button>
<StackPanel>
<TextBlock Text="{Binding BlaString}"/>
</StackPanel>
</Button>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
I'm trying to get the GridView to allow reordering, but the problem is I have a button and some other stuff inside of the gridview.
The button eats up all the focus, so the GridView can't perform any reordering. Is there any way around this? Like to invoke the reorder event manually? Without the button the reordering works fine.

I suggest you could use Border to instead the button to achieve the similar visual effect, besides, the border doesn’t affect the reorder of gridview.
As follows:
<GridView SelectionMode="None" ItemsSource="{x:Bind Bla}" CanReorderItems="True" AllowDrop="True" CanDragItems="True">
<GridView.ItemTemplate>
<DataTemplate x:DataType="local:BlaType">
<Border Background="LightGray" Height="30" Width="60" >
<TextBlock Text="{x:Bind BlaString}" />
</Border>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>

Related

UWP - can't access values in ItemsPanel

I have the following XAML but I can't seem to access the contents of the ItemsWrapGrid in the corresponding .CS file - can anyone tell me what I should be doing (here's the code behind and xaml) :
private void wifiTapped(object sender, TappedRoutedEventArgs e)
{
Debug.WriteLine("in here " + e.GetType().ToString());
ItemsWrapGrid wg = (ItemsWrapGrid) sender;
Debug.WriteLine(e.OriginalSource.ToString());
foreach (Control c in wg.Children)
{
Debug.WriteLine("Control " + c.Name);
}
Debug.WriteLine("leaving ");
}
<GridView VerticalAlignment="Top" ItemsSource="{Binding nets}" x:Name="GDView" ItemClick="gdViewClick" >
<GridView.ItemTemplate>
<DataTemplate x:Name="configDataTemplate" x:DataType="data:wifiNets" >
<StackPanel Height="300" Width="350" Margin="10" Name="dtStackPanel" >
<Image Source="Assets\wifiIcon.png" Width="200" Height="201" />
<StackPanel Orientation="Horizontal">
<TextBlock Text="Name" Margin="0,0,10,0"/>
<TextBlock Name="configSSID" Width="auto" Text="{x:Bind NetSSID}" FontSize="24" />
</StackPanel>
<StackPanel Orientation="Horizontal">
<TextBlock Text="Strength" Margin="0,0,10,0"/>
<!--<TextBlock Name="configStrength" Width="auto" Text="{x:Bind NetSSIDStrength}" FontSize="20" />-->
<ProgressBar Name="configProgBar" Maximum="5" Value="{x:Bind NetSSIDStrength}" Foreground="Green" />
</StackPanel>
<StackPanel Orientation="Horizontal">
<TextBlock Text="Connected" Margin="0,0,10,0"/>
<TextBlock Name="configConnectedTo" Text="{x:Bind NetSSIDConnected}" FontSize="20"/>
</StackPanel>
</StackPanel>
</DataTemplate>
</GridView.ItemTemplate>
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsWrapGrid MaximumRowsOrColumns="10" Orientation="Vertical" Tapped="wifiTapped" />
</ItemsPanelTemplate>
</GridView.ItemsPanel>
</GridView>
Just to be clear, when I run this I have three items of data (so it's working) - but what I'd like to be able to do is click on any one of the three data items and be able to identify the individual controls and their values within the data panel.
Thanks in advance, this is driving me nuts.
Paul.
Set IsItemClickEnabled to true on your GridView, and hook into the ItemClick event on the GridView itself. From the event args, you can get the sender (most likely the GridViewItem UI element itself, of which your DataTemplate content is a child), and the ClickedItem, which is the bound datacontext of the datatemplate - in your case the instance of the data:wifiNets - which if your bindings work mean you won't actually have to look in the VisualTree at all.
If for some reason you want to recurse through the VisualChildren for the items of any ItemsControl, use the ContainerFromIndex or ContainerFromItem methods on the ItemsControl to get the ItemContainer hosting each instance of the datatemplate - although I wouldn't recommend doing this unless you really need too. Ideally you shouldn't often have a need for manually trawling the visual tree.

Display list of controls with fluid width in wpf

I've created panel which displays controls. However I want the list of controls to always fit the width of the window. Similar to how visual studios Properties panel works. I'm assuming by using listbox I'll automatically inherit the scrollbar when the controls become lengthy.
What i have now on the left and the goal on the right.
This is visual studios.
My code behind looks like this...
<ListBox Grid.Column="0" x:Name="AssetList" ItemsSource="{Binding Attributes}" SelectionMode="Extended">
<ListBox.Resources>
<DataTemplate DataType="{x:Type model:IntAttr}">
<WrapPanel>
<TextBlock Text="{Binding Key}" Foreground="Blue"></TextBlock>
<TextBlock Text=" "></TextBlock>
<TextBlock Text="{Binding Value}"></TextBlock>
</WrapPanel>
</DataTemplate>
</ListBox.Resources>
</ListBox>
Solution:
<ListBox HorizontalAlignment="Stretch"
HorizontalContentAlignment="Stretch"
ScrollViewer.VerticalScrollBarVisibility="Visible"
Grid.Column="0"
x:Name="AssetList"
ItemsSource="{Binding Attributes}"
SelectionMode="Extended">....

ScrollView not working in Windows 10

I have a ViewModel with about 200 contacts and I am binding it to a ListView
<Grid>
<ScrollViewer
HorizontalScrollBarVisibility="Auto"
VerticalScrollBarVisibility="Auto">
<ListView x:Name="ContactListing" ItemsSource="{Binding ContactListing}" >
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Path=DisplayName}" />
<Image Source="{Binding Thumbnail,Converter={StaticResource ResourceKey=contactConv}}" />
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</ScrollViewer>
</Grid>
Would be great if someone could explain the details behind the ScrollViewers visibility
A ListView control already contains a ScrollViewer and implements scrolling based on the amount of items, there is no need to wrap this control in another ScrollViewer. You can double check this in the default ControlTemplate of ListView at line 6219 in the generic.xaml file containing all Windows 10 styles:
C:\Program Files (x86)\Windows Kits\10\DesignTime\CommonConfiguration\Neutral\UAP\10.0.10240.0\Generic\generic.xaml
So you simply have to remove the ScrollViewer from your XAML fragment.
<Grid>
<ListView x:Name="ContactListing" ItemsSource="{Binding ContactListing}" >
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Path=DisplayName}" />
<Image Source="{Binding Thumbnail,Converter={StaticResource ResourceKey=contactConv}}" />
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
Note: As you're using a ListView, I suppose you want all your items stacked above each other. If you want multiple columns to show your items, use a GridView instead.

XAML listviewitem behavior of a button if mousover

I'm working on a UWP for Windows 10 and wrote the following XAML Code:
<ListView x:Name="listTimetypes" ItemsSource="{Binding Items}" Width="220" Margin="8">
<ListView.ItemTemplate>
<DataTemplate >
<Button x:Name="btnTimeTypes" Content="{Binding Name}" Width="200" Margin="4"
Foreground="Black" Background="#FFE6E6E6"
Style="{StaticResource HoverButtonStyleChange}"
FontSize="15" Click="btnTimeTypes_Click"/>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
So here comes my question how can i make the items of the listview behave like a button if the mouse hovers a item?
looking forword to hear anwsers

Windows 8.1 c# xaml - change background colour of stackpanel onBind

I am binding ObservableCollection<MyClass> to a gridview, but I need to change the background colour of a stackpanel within that GridView.ItemTemplate when a value exists in ObservableCollection<MyOtherClass>.
I have reviewed several tutorials (example) and question on this subject but none have helped. I have also tried binding the data to the gridview then looping through that gridview using gv.Items and access the stackpanel that way, obviously I have failed.
What is the best way to achieve my desired outcome?
<GridView x:Name="gv" Margin="30,0,0,0" ItemClick="gv_ItemClick" Holding="itemGridView_Holding" SelectionMode="None" IsItemClickEnabled="True" >
<GridView.ItemTemplate>
<DataTemplate>
<GridViewItem >
<!--<Grid>-->
<StackPanel x:Name="spJobDisplay" Width="350" Background="White" >
<Image Source="{Binding Images[0].Source}" />
<StackPanel>
<TextBlock Text="{Binding SelectedSupplier.SupplierName}" Margin="10,0,0,0" Foreground="Black"></TextBlock>
</StackPanel>
</StackPanel>
<!--</Grid>-->
</GridViewItem>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
As you can see above I have set spJobDisplay stackPanel to white. It is that which I would like to to changed based on values in ObservableCollection<MyOtherClass>

Categories