We Keep Coding

Reorder GridView with buttons

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>

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.

Listview in WinRT using C#

I want my ListView to display the items in a group horizontally as displayed in the image below. I could not find anything relating to this online. This screen was taken from the Groove music application. Since I am new to asking questions here it seems I don't have enough reputation to post images therefore I provided a link to the image in question sorry for the inconvenience.
http://i.imgur.com/boCK9iy.png
Edit:
I am trying to imitate the groove music player for a school project this link below shows my app. Hopefully this give you a better idea of the problem.
http://i.imgur.com/vPJ13Sc.png
My Xaml Code:
<ListView
x:Name="itemGridView"
Grid.Row="1"
ItemsSource="{Binding Source={StaticResource artistsItemsViewSource}}"
SelectionMode="None"
IsSwipeEnabled="false"
IsItemClickEnabled="True"
RequestedTheme="Light">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel MaxWidth="200">
<Ellipse Height="150" Width="150">
<Ellipse.Fill>
<ImageBrush Stretch="Fill" ImageSource="Assets/Artist.png"/>
</Ellipse.Fill>
</Ellipse>
<TextBlock Text="{Binding ArtistName}" FontSize="18" HorizontalAlignment="Center" Margin="0,5,0,0" TextWrapping="Wrap"/>
<TextBlock Text="{Binding AlbumCount}" FontSize="15" HorizontalAlignment="Center" Margin="0"/>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsStackPanel Width="200" HorizontalAlignment="Left" Margin="30,0,0,0"/>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<ListView.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<Grid Margin="0,0,0,2">
<TextBlock Text="{Binding AlphaLetter}" FontSize="20" Foreground="{StaticResource SideButtonBlue}" />
</Grid>
</DataTemplate>
</GroupStyle.HeaderTemplate>
</GroupStyle>
</ListView.GroupStyle>
</ListView>

I think you can change the view in the listview settings to LargeIcon and then you can set Icons for each value in your listview.
But you could maybe use the ObjectListView its better than the plain ListView and you have more functions. check this out: click
I found something similar on the site of the objectlistview: here

for horizontal placement of the elements in ListView do this:
<ItemsStackPanel
Orientation="Horizontal" />
also, remove Width="200"
also you can use GridView instead of ListView

How to make Settings Panel in Windows Phone 8? C# and XAML

I'm trying to create an app with simple settings, with list boxes, etc.
I'm using C# and XAML.
I'm trying to implement something similar to the Camera app's photo settings settings panel.
Does anyone have any idea how to do this?
(I've tried Stackpanel - Scrollviewer - Stackpanel - content, however, couldn't get any transition)

You can try with ListBox,
<ListBox Grid.Row="0" ItemsSource="{Binding Settings}"
SelectionMode="Single" SelectedItem="{Binding CurrentSelectedSetting, Mode=TwoWay}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding SettingName}"></TextBlock>
<TextBlock Width="5"></TextBlock>
</StackPanel>
<TextBlock Text="{Binding Description}" TextWrapping="Wrap"></TextBlock>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>

Why does the button size increases as the listbox size gets populated with data?

I'm a newbie to c#. I have designed a windows program with button and listbox. The listbox populates the log as the script runs the application. However, as the listbox gets populated with log, the button and label increases which makes the stack panel very ugly?
Any help/advice would be appreciated. Below is my xaml code.
<Grid>
<Border BorderBrush="Black" BorderThickness="2" Margin="0,11,0,5" CornerRadius="5" Background="White">
<StackPanel Orientation="Horizontal" Margin="7,10,7,2">
<StackPanel Orientation="Vertical">
<TextBlock Text="City" Margin="5" HorizontalAlignment="Center"></TextBlock>
<ComboBox Name="City" SelectedValue="Chicago" SelectedValuePath="Name">
<ComboBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Path=Name,Mode=OneWay}"></TextBlock>
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
</StackPanel>
<Button Name="btnEnter" Content="Enter" Width="200" Margin="4" Padding="6" Click="btnEnter_Click"></Button>
<Button Name="btnViewLog" Content="View Log" Width="100" Margin="4" Padding="6" Click="btnLog_Click"></Button>
<ListBox Name="lbLog" Visibility="Collapsed">
<ListBox.ItemTemplate>
<DataTemplate>
<TextBox Text="{Binding Description}" IsReadOnly="True" BorderThickness="0" Background="Transparent"></TextBox>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
Thanks.
Ash

Without your Xaml, it is hard to diagnose the problem, so please try to post it with any further questions. It SOUNDS like it is a horizontal StackPanel, and the elements are all next to each other.
If the orientation of your StackPanel is Vertical, set the HorizontalAlignment on the button to Left, Right, or Center. If the StackPanel orientation is Horizontal, set the VerticalAlignment on the button to Top, Bottom, or Center.
I'm pretty certain both settings are "Stretch" by default, which means they will try to fill all the space that is available, rather than sizing to their content.