Adding ListviewItem in Splitview

Question

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="&#xE700;"
                     Width="50" Height="50" Background="Transparent" Foreground="White"  Click="HamburgerButton_Click" />
                    <StackPanel Orientation="Horizontal">
                        <Button FontFamily="Segoe MDL2 Assets" Content="&#59724;"
                     Width="50" Height="50" Background="Transparent" Foreground="White">
                        <TextBlock Foreground="White" FontSize="10" VerticalAlignment="Center" />
                    </StackPanel>

It seems as if your xaml is missing some info to be complete. Also another Q: You say you don't want to use a radioButton, and then you ask how to make the TextBlock and radioButton a clibale entity. Should it simply be button that second mention of radioButton? — ILOABN, Aug 08 '15 at 09:48
@FabianMiiro apologies I meant button and textblock. I want a textblovk and button a single clickable entity using listview — shriyanshk, Aug 08 '15 at 11:15

score 2 · Accepted Answer · answered Aug 08 '15 at 10:43

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="&#xE700;" 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="&#59724;" 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

Well the solution is perfect only thing is left to remove border from button. I read some articles and there seems to be workaround but x:static is showing not available in my case http://stackoverflow.com/questions/995757/how-do-you-completely-remove-the-button-border-in-wpf — shriyanshk, Aug 08 '15 at 11:57

Adding ListviewItem in Splitview

1 Answers1