Adding ListviewItem in Splitview - xaml

I am creating a Windows 10 universal App and I Have successfully created shell.xaml but I don't wanna use radioButton instead of that I have used a button and TextBlock.
I want to know how to make the TextBlock and Button a Single clickable entity through listView Item.
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<SplitView x:Name="mySplitView" DisplayMode="CompactInline" IsPaneOpen="False"
CompactPaneLength="50" OpenPaneLength="150" Content="{Binding}">
<SplitView.Pane>
<StackPanel Background="{ThemeResource SystemControlBackgroundAccentBrush}">
<Button x:Name="HamburgerButton" FontFamily="Segoe MDL2 Assets" Content=""
Width="50" Height="50" Background="Transparent" Foreground="White" Click="HamburgerButton_Click" />
<StackPanel Orientation="Horizontal">
<Button FontFamily="Segoe MDL2 Assets" Content=""
Width="50" Height="50" Background="Transparent" Foreground="White">
<TextBlock Foreground="White" FontSize="10" VerticalAlignment="Center" />
</StackPanel>

From what I understand you want to make an event fire whenever you press somewhere inside the StackPanel that contains the Button and TextBlock.
One solution would be to simply put your Button and TextBlock inside a ListView item.
Like this (I include all the xaml for the SplitView.Pane to make it a bit more clear):
<SplitView.Pane>
<StackPanel Background="{ThemeResource SystemControlBackgroundAccentBrush}">
<Button x:Name="HamburgerButton" FontFamily="Segoe MDL2 Assets" Content="" Width="50" Height="50" Background="Transparent" Foreground="White" Click="HamburgerButton_Click" />
<ListView>
<ListView.Items>
<ListViewItem Padding="0" Tapped="ListViewItem_Tapped">
<StackPanel Orientation="Horizontal" VerticalAlignment="Top" Height="50">
<Button FontFamily="Segoe MDL2 Assets" Content="" Width="50" Height="50" Background="Transparent" Foreground="White" />
<TextBlock Foreground="White" FontSize="10" Text="Wop wop!" VerticalAlignment="Center" />
</StackPanel>
</ListViewItem>
</ListView.Items>
</ListView>
</StackPanel>
</SplitView.Pane>
In this example only the '%' is shown when the pane is closed and the '%' plus the text "Wop wop!" when it's open. Whenever the content of this ListViewItem (the buton or TextBlock) is pressed, the method "ListViewItem_Tapped" will fire.
If I in any way misunderstood your question or you need any more info about my answer please let me know.
Have a wonderful day!
PS. The button still "acts" like a button, by showing it's own border, visual states and so on. I don't know from the top of my head how to disable this. But you could perhaps try disabling it or using another textblock instead? .DS

Related

WinUI3 ComboBox and Button have different size

we have a ComboBox and a Button next to eachother. They are in the same Grid.Rowin two different Grid.Columns.
However they both appeared to have a different size. Even by setting VerticalAlignment="Stretch" this did not change.
Last but not least I set an fixed height to both elements but they are still not the same size.
How dows that come and how can I change it?
Here is an image of the problem
This works on my sample app.
<Grid RowDefinitions="Auto,Auto">
<TextBlock Text="Test" Grid.Row="0" />
<Grid
Grid.Row="1"
ColumnDefinitions="Auto,Auto"
RowDefinitions="Auto,Auto">
<ComboBox
Grid.Row="1"
Grid.Column="0"
VerticalAlignment="Stretch"
CornerRadius="0"
SelectedIndex="0">
<TextBlock Text="Auswahlen" />
</ComboBox>
<Button
Grid.Row="1"
Grid.Column="1"
VerticalAlignment="Stretch"
CornerRadius="0">
<FontIcon
FontFamily="Segoe MDL2 Assets"
Glyph="" />
</Button>
</Grid>
</Grid>

Vertical Scrollbar not visible in listbox inside popup-element

The vertical Scrollbar is visible in W 8.1 but not in WP 8.1 on my emulator.
What have i missed?
I have also tried to set VerticalScrollBarVisibility to Visible
<Popup x:Name="LayerPopupWindow" IsLightDismissEnabled="True" >
<ListBox x:Name="MyList" Margin="3" Width="auto" Background="#DDFFFFFF"
Height="{Binding Path=ActualHeight,ElementName=MyMapView}" ScrollViewer.VerticalScrollBarVisibility="Auto" ScrollViewer.VerticalScrollMode="Enabled">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Height="auto" >
<CheckBox IsChecked="{Binding IsVisible, Mode=TwoWay}" BorderBrush="Black" MinWidth="30"/>
<TextBlock Text="{Binding ID, Mode=OneWay}" VerticalAlignment="Center" >
<ToolTipService.ToolTip>
<StackPanel MaxWidth="400">
<TextBlock FontWeight="Bold" Text="{Binding CopyrightText}" TextWrapping="Wrap" />
<TextBlock Text="{Binding Description}" TextWrapping="Wrap" />
</StackPanel>
</ToolTipService.ToolTip>
</TextBlock>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Popup>
Looked at your links Depechie and tried it in my example, for some reason the scrollbars still wasnt visible.
Then i found this link
Making ScrollViewer's ScrollBar always visible through overriding or styling
Tried it and the scrollbars know were visible, so problem solved.

LongListSelector centered items unexpected position change

I have a LongListSelector control on a page in my Windows Phone 8 app. For this control I set a GroupHeaderTemplate and a ItemTemplate and both contain a TextBlock. If I align the TextBlock controls to center I have some weird behavior (maybe not weird but unexplainable to me at the moment). When I open the page on my phone the centered text moves ca. 5px to the right. The move is visible to the user (it's happening after the page is loaded). I tried to solve this problem but all margin changes (and other trials) did not change the behavior and my friend Google couldn't help me either. Can some explain to my why this is happening and how to solve this?
My code (simplified):
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="0">
<phone:LongListSelector x:Name="longList" LayoutMode="List" HideEmptyGroups ="true" Margin="5,0,5,5" ItemsSource="{Binding List, Mode=OneWay}" IsGroupingEnabled="True" Background="Transparent" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<phone:LongListSelector.Resources>
<DataTemplate x:Key="itemTemplate">
<Grid Margin="10,10,10,0" Background="#FFF3F1F1" HorizontalAlignment="Left">
<TextBlock x:Name="name" Margin="10" TextWrapping="NoWrap" Text="{Binding Name}" VerticalAlignment="Center" FontSize="40"/>
</Grid>
</DataTemplate>
<DataTemplate x:Key="groupHeaderTemplate">
<Grid Margin="10,10,10,0" Background="#FFF3F1F1" HorizontalAlignment="Center">
<TextBlock x:Name="name" Margin="10" TextWrapping="NoWrap" Text="test" VerticalAlignment="Center" FontSize="40"/>
</Grid>
</DataTemplate>
</phone:LongListSelector.Resources>
<!--<phone:LongListSelector.JumpListStyle>
<StaticResource ResourceKey="jumpListStyle"/>
</phone:LongListSelector.JumpListStyle>-->
<phone:LongListSelector.GroupHeaderTemplate>
<StaticResource ResourceKey="groupHeaderTemplate"/>
</phone:LongListSelector.GroupHeaderTemplate>
<phone:LongListSelector.ItemTemplate>
<StaticResource ResourceKey="itemTemplate"/>
</phone:LongListSelector.ItemTemplate>
<i:Interaction.Triggers>
<i:EventTrigger EventName="SelectionChanged">
<i:InvokeCommandAction Command="{Binding SelectItemCommand}"
CommandParameter="{Binding SelectedItem, ElementName=longList}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</phone:LongListSelector>
</Grid>
Thanks in advance

WP scrolling issue with listbox and scrollviewer

Hi I am trying to get my UI have scrolling in partial page having a list. Here's my code -
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="10,0,14,10">
<StackPanel>
<StackPanel Orientation="Horizontal">
<TextBox x:Name="searchTerm" Text="potato" Width="379" />
<Button x:Name="btnSearch" Content="Go" Click="btnSearch_Click" />
</StackPanel>
<TextBlock x:Name="noResultsTxt" Visibility="Collapsed" Margin="10, 30, 0, 0" Text="No results found! try different search term" Style="{StaticResource PhoneTextNormalStyle}" />
<ScrollViewer Height="520" Width="Auto" ScrollViewer.HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
<StackPanel>
<ListBox x:Name="itemlist" SelectionChanged="itemlist_SelectionChanged" Margin="0,10,0,0" >
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Margin="10" >
<TextBlock Text="{Binding Title}" FontSize="35" FontWeight="Normal"/>
<TextBlock Text="{Binding CommaCategories}" FontSize="20" FontWeight="Light" FontStyle="Italic"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
</ScrollViewer>
</StackPanel>
</Grid>
Doesnt seem to be scrolling at the List area. i seem to have figured out that the issue is with Scrollviewer not able to interact where ListBox exists. I verified that the scrolling is happening perfectly fine by setting IsHitTestVisible property of ListBox to be false.
Can someone help me out!
Answering my own question! Just as AMR commented it, I figured out that I don't need the scroll viewer, I just set the height of ListBox and scrolling worked fine! :)
On why external scrollviewer wont work with Listbox - https://stackoverflow.com/a/1294786/729032

how to make listbox is resizable inside its parent?

In a user control, I put a listbox which is bound to a dynamic datasource. This usercontrol will be in a popup window. I want to this list box can fill the rest of space of the window. Here is the Xaml I tried:
<ComboBox x:Name="cmbx1" Grid.Column="0" Grid.Row ="0" Margin="5"
Width="150" VerticalAlignment="Center" HorizontalAlignment="Left" SelectionChanged="filters_SelectionChanged">
......
</ComboBox>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right" Grid.Column="1" Grid.Row="0">
<Button Content="Test" Margin="5" Click="Button_Add" />
</StackPanel>
<DataGrid x:Name="ListGrid" Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2"
......
</DataGrid>
<ComboBox x:Name="cmb2" Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2" Margin="5">
......
</ComboBox>
<ListBox x:Name="lstSharing" Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="2" Margin="0,0,10,0"
Width="{Binding Width, ElementName=ListGrid}">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<tkit:WrapPanel Orientation="Horizontal" MaxWidth="650" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Margin="3" Width="Auto">
<CheckBox IsChecked="{Binding IsChecked, Mode=TwoWay}" />
<TextBlock Text="{Binding ItemName}" Width="120" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
What I want it height and width of list box can be setup dynamically based on windows size, the items bound to list box. But it is not working properly. Initially, the listbox has no scrollbar, I need to resize window manually so that scrollbar on display. I can not dynamically to change with, so I put MaxWidth =600. Otherwise, it always display all item in one row.
How to resolve this problem?
This is untested, but I would try something like this:
<ListBox x:Name="lstSharing"
Grid.Row="3"
Grid.Column="0"
Grid.ColumnSpan="2"
Margin="0,0,10,0"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<tkit:WrapPanel Orientation="Horizontal"
MaxWidth="{Binding ElementName=lstSharing, Path=ActualWidth}" />
</ItemsPanelTemplate>
It's a little difficult to know whether this will work without seeing the parent containers, but it should point you in the right direction.