Silverlight ToolKit DragDrop problem - xaml

I have pane with two grid and there is a listbox in both grid. I'd like to add Drag & Drop feature to the pane, so the user can drag a list element in the left listbox and drop it in the right listbox. I found many great tutorials and I could add the appropriate code to my pane but when the application is running and I click on the menu item of my pane it does not load. If I delete the drag & drop code everything works fine, so the problem is definitely the Drag & Drop feature.
<telerikDocking:RadPane x:Class="Module_TestModule1.PaneSzD" telerikDocking:RadDocking.SerializationTag="Module_TestModule1.PaneSzD"
xmlns:telerikDocking="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Docking"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:toolkit="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Toolkit"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Name="PaneSzD1" Header="PaneSzD" IsHidden="True">
<StackPanel Orientation="Horizontal">
<Grid x:Name="LeftGrid" Width="250">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<toolkit:ListBoxDragDropTarget AllowDrop="True" Grid.Row="0">
<ListBox Name="lbLRecords">
<ItemsPanelTemplate>
<StackPanel Orientation="Vertical" />
</ItemsPanelTemplate>
</ListBox>
</toolkit:ListBoxDragDropTarget>
<StackPanel Grid.Row="1" Height="Auto">
<TextBox Name="tbLRecord" KeyDown="tbLRecord_KeyDown" />
<Button Name="btnLAddRecord" Content="Add Record" Height="30" Click="btnLAddRecord_Click" ></Button>
</StackPanel>
</Grid>
<StackPanel Orientation="Vertical">
<Button Name="btnLMoveRecord" Content="Move Record From Left" Height="30" Click="btnLMoveRecord_Click" Margin="10,5,10,5" />
<Button Name="btnRMoveRecord" Content="Move Record From Right" Height="30" Click="btnRMoveRecord_Click" Margin="10,5,10,5" />
</StackPanel>
<Grid x:Name="RightGrid" Width="250">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<toolkit:ListBoxDragDropTarget AllowDrop="True" Grid.Row="0">
<ListBox Name="lbRRecords">
<ItemsPanelTemplate>
<StackPanel Orientation="Vertical" />
</ItemsPanelTemplate>
</ListBox>
</toolkit:ListBoxDragDropTarget>
<StackPanel Grid.Row="1" Height="Auto">
<TextBox Name="tbRRecord" KeyDown="tbRRecord_KeyDown" />
<Button Name="btnRAddRecord" Content="Add Record" Height="30" Click="btnRAddRecord_Click"></Button>
</StackPanel>
</Grid>
</StackPanel>
</telerikDocking:RadPane>
Thanks for any help!

All the info to do this using the Silverlight Control Toolkit can be found here: http://themechanicalbride.blogspot.com/2009/08/new-with-silverlight-toolkit-drag-and.html

Related

SOLVED Pressing on ScrollViewer inside ListBox Item doesn't select the Item

I gave a ListBox that lists items. The items, can vary in size, but follow the same pattern:
picture................Metadata
ID
<ListBox Name="View" Grid.Row="2" ItemsSource="{Binding Human, ElementName=uc}"
SelectedItem="{Binding SelectedHuman, ElementName=uc}"
MouseDoubleClick="OnSubjectEditClick"
VerticalContentAlignment="Center"
VirtualizingPanel.IsVirtualizing="True"
VirtualizingPanel.ScrollUnit="Pixel"
ScrollViewer.CanContentScroll="True"
Grid.IsSharedSizeScope="True"
ScrollViewer.HorizontalScrollBarVisibility="Disabled">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate >
<DataTemplate >
<Border BorderBrush="#565656" BorderThickness="1" Margin="10" Padding="10">
<Grid>
<Grid.RowDefinitions>
<RowDefinition MaxHeight="300" />
<RowDefinition MaxHeight="50" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto" MinWidth="300" MaxWidth="500" SharedSizeGroup="col1"/>
<ColumnDefinition MaxWidth="500" Width="*" SharedSizeGroup="col2"/>
</Grid.ColumnDefinitions>
<Image Grid.Row="0" Grid.Column="0" MaxHeight="300" MaxWidth="300" Source="{Binding Thumb}"/>
<TextBlock Grid.Column="0" Grid.Row="1" Text="{Binding Name}" FontWeight="Bold" TextAlignment="Center"/>
<local:MetadataView Grid.Column="1" Grid.RowSpan="2" Metadata="{Binding Metadata}" HorizontalAlignment="Stretch" VerticalAlignment="Center" IsEdit="False" />
</Grid>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
The items inside Metadata .xaml looks like this. StackPanels containing actual Metadata are automatically generated by code inside "DisplayMode":
<Grid VerticalAlignment="Center" HorizontalAlignment="Stretch">
<ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Disabled" CanContentScroll="False" Height="300" >
<StackPanel x:Name="DisplayMode" VerticalAlignment="Center" Grid.IsSharedSizeScope="True" >
...........
<StackPanel/> //AutoGenerated
............
</StackPanel>
</ScrollViewer>
</Grid>
The problem I'm facing is the fact, that I need to be able to select an item inside the ListBox. But, by adding ScrollViewer in Metadata.xaml it seems I Reroute the selector, so it is trying to select an item in Metadata ScrollViewer instead of ListBox when I press the part of the ListBox containing Metadata. If I press on Thumbnail, or even RightClick on any part of the ListBox - it seems to select just fine.
[SOLVED] After playing around with available options in ScrollViewer I stumbled across Focusable. Setting it to False did the trick.
I hope it will help someone in the future.
<Grid VerticalAlignment="Center" HorizontalAlignment="Stretch">
<ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Disabled" CanContentScroll="False" Height="300" Focusable="False" >
<StackPanel x:Name="DisplayMode" VerticalAlignment="Center" Grid.IsSharedSizeScope="True" >
</StackPanel>
</ScrollViewer>
</Grid>

C# UWP - The first image inside ListView is incorrectly sized

I have a simple layout that basically displays a list of items in ListView using an ItemsWrapGrid as the panel template. The problem I am having is that the first image in the ListView is always bigger than the rest, even with a fixed width / height set. I am completely stumped.
An image of the problem:
The ListView XAML is:
<ListView ItemsSource="{Binding Currencies}" ItemTemplate="{StaticResource PortfolioCurrencyTemplate}">
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsWrapGrid Orientation="Horizontal" Width="Auto" Height="Auto"/>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
</ListView>
The data template:
<Page.Resources>
<DataTemplate x:Key="PortfolioCurrencyTemplate" x:DataType="viewModels:PortfolioViewModel">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
BorderBrush="Black"
BorderThickness="1"
CornerRadius="2"
Padding="10">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="2*" />
</Grid.ColumnDefinitions>
<Image Grid.Column="0" Grid.Row="0" Grid.RowSpan="2" Grid.ColumnSpan="1" MaxWidth="100" MaxHeight="100" Source="https://www.cryptocompare.com/media/19633/btc.png"/>
<TextBlock Grid.Column="1" Grid.Row="0" Text="{Binding Name}" VerticalAlignment="Center"/>
<TextBlock Grid.Column="1" Grid.Row="1" Text="{Binding Symbol}" VerticalAlignment="Center"/>
<TextBlock Grid.Column="1" Grid.Row="2" Text="{Binding LastPrice}" VerticalAlignment="Center"/>
</Grid>
</DataTemplate>
</Page.Resources>
Instead of using ListView and changing ItemsPanelTemplate to create a GridView Effect and tackle issues one by one, I would suggest you switch to AdaptiveGridView.
You can install Nuget Package for UWP Community Toolkit from Here
Add below namespace to your page
xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls"
Now your ListView needs to be replaced like below.
<controls:AdaptiveGridView ItemsSource="{Binding Currencies}"
ItemTemplate="{StaticResource PortfolioCurrencyTemplate}"
DesiredWidth="250"/>
Output from Designer
Good Luck.

XAML set datagrid to top 90% of grid, buttons to bottom 10 % all in a tabitem

I have a TabItem which I want to display a DataGrid (MahApps.Metro) in the upper 90% of it and 2 buttons I want to display at the bottom 10% of it. This works when the window is fully enlarged, but when it is not, the scrollviewer is not visible and the controls and elements go off screen. Please help, I've been stuck for hours! Here is my code so far:
<TabItem Header="Queue" FontSize="15">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="9*"/>
<RowDefinition Height="1*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="77*"/>
<ColumnDefinition Width="24*"/>
</Grid.ColumnDefinitions>
<DataGrid x:Name="songdatagrid" VerticalAlignment="Stretch" ItemsSource="{Binding SongInfo}" VerticalScrollBarVisibility="Auto" AutoGenerateColumns="False" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" >
<DataGrid.Columns >
<DataGridTemplateColumn x:Name="songinfocolumn" Header="Song Info" Width=".6*">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<TextBlock Text="{Binding songInfo.Text}" Uid="{Binding SongInfo.Uid}" ToolTipService.ToolTip="Double click to open song in Youtube." MouseLeftButtonDown="tb_MouseLeftButtonDown5" />
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
<DataGridTemplateColumn x:Name="requestercolumn" Header="Requester" Width=".18*">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<TextBlock Text="{Binding songReq.Text}" Uid="{Binding songReq.Uid}" ToolTipService.ToolTip="Double click to open requester's Twitch page." MouseLeftButtonDown="tb_MouseLeftButtonDown6" />
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
<DataGridTemplateColumn x:Name="moveupcolumn" Header="Move Up" Width=".12*">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<Button Width="35" Height="35" Uid="{Binding moveUp.Uid}" Style="{DynamicResource MetroCircleButtonStyle}" Click="moveup" ToolTipService.ToolTip="Click to move this song up in the list.">
<Rectangle Width="20" Height="20" Fill="{Binding Path=Foreground, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Button}}}">
<Rectangle.OpacityMask>
<VisualBrush Stretch="Fill" Visual="{DynamicResource appbar_arrow_up}" />
</Rectangle.OpacityMask>
</Rectangle>
</Button>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
<DataGridTemplateColumn x:Name="deletecolumn" Header="Remove" Width=".12*">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<Button Width="35" Height="35" Uid="{Binding delete.Uid}" Style="{DynamicResource MetroCircleButtonStyle}" Click="deleteSong" ToolTipService.ToolTip="Click to remove song from the list.">
<Rectangle Width="20" Height="20" Fill="{Binding Path=Foreground, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Button}}}">
<Rectangle.OpacityMask>
<VisualBrush Stretch="Fill" Visual="{DynamicResource appbar_delete}" />
</Rectangle.OpacityMask>
</Rectangle>
</Button>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
</DataGrid.Columns>
</DataGrid>
<Button Style="{DynamicResource SquareButtonStyle}" x:Name="refresh" IsDefault="True" Background="White" Content="Refresh" Click="Button_Click" FontSize="16" Grid.Column="0" Grid.Row="1"/>
<Button Style="{DynamicResource SquareButtonStyle}" x:Name="clear" IsDefault="True" Background="White" Content="Clear List" Click="clearlist" FontSize="16" Grid.Column="1" Grid.Row="1"/>
</Grid>
</TabItem>
I had to add this to the top to get the Metro horizontal scrollbar working on the tabholder. Other than this, there are just more tabitems.
<TabControl x:Name="tabholder" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="LightBlue"
SelectionChanged="TabControl_SelectionChanged" >
<TabControl.Template>
<ControlTemplate TargetType="TabControl">
<StackPanel>
<ScrollViewer HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Disabled">
<TabPanel x:Name="HeaderPanel"
Panel.ZIndex ="1"
KeyboardNavigation.TabIndex="1"
Grid.Column="0"
Grid.Row="0"
IsItemsHost="true"/>
</ScrollViewer>
<ContentPresenter x:Name="PART_SelectedContentHost"
ContentSource="SelectedContent"/>
</StackPanel>
</ControlTemplate>
</TabControl.Template>
The StackPanel and the other Grid panels you have in there are redundant and causing your issues. Also your fixed Width & Height in templates that have their own set size attributes for things like Height are going to give unwanted results. You should only need something like this to accomplish your goal.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="9*"/>
<RowDefinition Height="1*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<DataGrid Grid.ColumnSpan="2">...</DataGrid>
<Button Grid.Row="1" Content="Button 1"/>
<Button Grid.Row="1" Grid.Column="1" Content="Button 2"/>
</Grid>
Cheers!
The StackPanel was causing the issues, everything works now! :D

Why is there empty space at the top & bottom of my page when the UWP app runs? XAML nor Design view shows empty space

Why does my UWP (Universal Windows Platform) App force extra space at the top and bottom of my app even though there is nothing there?
Here's what it looks like:
Even though in Visual Studio 2013 (design mode) you can see that the blue bounding box displays the bottom of the page as follows:
The outer grey is the device it would be running on.
The XAML looks like the following:
<Page
x:Class="CYaPass.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:CYaPass"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Height="515" Width="570" Background="LightGray" Loaded="Page_Loaded">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="320"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0" Grid.Row="0">
<TextBlock FontSize="16" HorizontalAlignment="Center">1. Select a Site/Key</TextBlock>
<ListView BorderThickness="2" BorderBrush="Aquamarine"
x:Name="SiteListBox" HorizontalAlignment="Stretch" VerticalAlignment="Center" Height="251"
Margin="10,10,0,0" Width="Auto" SelectionChanged="SiteListBox_SelectionChanged">
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="Padding" Value="5,0,0,0" />
</Style>
</ListView.ItemContainerStyle>
<ListViewItem Content="Item 2"/>
</ListView>
<StackPanel Margin="10,0,0,0" Orientation="Horizontal" Grid.Column="0">
<Button x:Name="DeleteSiteButton" Content="Delete Site"
HorizontalAlignment="Right" Margin="0,0,0,0" VerticalAlignment="Top" Click="DeleteSiteButton_Click"/>
<Button x:Name="AddSiteButton" Content="Add Site" HorizontalAlignment="Right"
Margin="10,0,0,0" VerticalAlignment="Top" Click="AddSiteButton_Click"/>
</StackPanel>
</StackPanel>
<TextBox x:Name="passwordTextBox" HorizontalAlignment="Left" Margin="7,150,0,0" Grid.Row="1" Grid.ColumnSpan="2"
TextWrapping="Wrap" Text="" VerticalAlignment="Top" Width="560"/>
<StackPanel HorizontalAlignment="Left" Height="128" Margin="10,0,0,0" Grid.Column="0" Grid.Row="1"
VerticalAlignment="Top" Width="285">
<Grid Margin="0,0,-11,0">
<Grid.RowDefinitions>
<RowDefinition Height="40" ></RowDefinition>
<RowDefinition Height="40" ></RowDefinition>
<RowDefinition Height="40" ></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="180"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<CheckBox x:Name="addUppercaseCheckbox" Grid.Row="0" Grid.Column="0" Content="Add Uppercase" HorizontalAlignment="Stretch" VerticalAlignment="Center" Width="254" Click="addUppercaseCheckbox_Click" Margin="7,0,3,0"/>
<CheckBox x:Name="addSpecialCharscheckBox" Grid.Row="1" Grid.Column="0" Content="Add Special Chars" HorizontalAlignment="Stretch" VerticalAlignment="Center" Margin="7,0,3,0"/>
<TextBox x:Name="specialCharsTextBox" Grid.Column="1" Grid.Row="1" Margin="7,0,3,0" VerticalAlignment="Center" HorizontalAlignment="Stretch" Grid.RowSpan="1" TextWrapping="NoWrap" Text="#"/>
<CheckBox x:Name="setMaxLengthCheckBox" Grid.Row="2" Grid.Column="0" Content="Set Max Length" HorizontalAlignment="Stretch" VerticalAlignment="Center" Margin="7,0,3,0"/>
<local:NumericUpDown Grid.Column="1" HorizontalAlignment="Left" Margin="7,0,3,0" Grid.Row="2" VerticalAlignment="Center" Width="64"/>
</Grid>
</StackPanel>
<StackPanel Grid.Column="1" Grid.Row="0">
<TextBlock Grid.Column="1" Grid.Row="0" FontSize="16" HorizontalAlignment="Center">2. Draw a pattern</TextBlock>
<Canvas HorizontalAlignment="Center" x:Name="MainCanvas"
Height="252" Width="252" Margin="7,10,0,0" VerticalAlignment="Top" Background="AliceBlue" Tapped="MainCanvas_Tapped" PointerMoved="MainCanvas_PointerMoved"/>
<Button x:Name="ClearGridButton" Content="Clear"
Margin="50,0,10,0" VerticalAlignment="Center" Click="ClearGridButton_Click" HorizontalAlignment="Right"/>
</StackPanel>
</Grid>
</Page>
You can see the page's width is wider than the height, but when the app runs on a desktop or a simulator device (like 7" pad) the extra space is pushed into the top and the bottom.
UWP Forced Minimum?
Is this due to some minimum size or something that UWP forces on apps?
Cannot Resize Smaller When Running
Even if I grab the form's bottom or top bounding frame when the app is running, I cannot make it any smaller.
The Default Content-Alignment is set to Center because you set the Height and Width of your Page, so your page is placed in the Center and isn't filling the whole Screen.
One Possible Solution is to add to the Page xaml Attributes this Piece of Code:
VerticalAlignment="Top".
To set the HorizontalAlignment to the left add this:
HorizontalAlignment="Left".
One more advise: When you don't Need to Display more than one xaml Page at the Screen leave the Page Height and Width to Default.

Windows Phone Context Menu Item Text Not Appearing

I have a Windows Phone 8 app using XAML/C#. My app has an ItemsControl that relies on a data template. My DataTemplate looks like the following:
<DataTemplate x:Key="myTemplate">
<Grid Margin="0,0,0,8">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid VerticalAlignment="Center">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<TextBlock Text="{Binding DisplayName}" TextWrapping="NoWrap" Style="{StaticResource PhoneTextLargeStyle}" TextTrimming="WordEllipsis" >
<toolkit:ContextMenuService.ContextMenu>
<toolkit:ContextMenu>
<toolkit:MenuItem x:Name="customerMenuItem" Foreground="White" Header="View Customer Profile" Click="customerMenuItem_Click" Tag="{Binding Path=CustomerName}" />
</toolkit:ContextMenu>
</toolkit:ContextMenuService.ContextMenu>
</TextBlock>
<TextBlock Text="{Binding Summary}" TextWrapping="NoWrap" Grid.Row="1" Style="{StaticResource PhoneTextSmallStyle}" />
</Grid>
<StackPanel Orientation="Horizontal" Grid.Column="1"><!-- Stuff here --></StackPanel>
</Grid>
</DataTemplate>
This DataTemplate is referenced in the main part of my XAML as shown here:
<Grid x:Name="ContentPanel" Grid.Row="1" Grid.ColumnSpan="2" Margin="12,0,12,0">
<ScrollViewer>
<ItemsControl x:Name="myItemsControl" ItemTemplate="{StaticResource myTemplate}" ItemsSource="{Binding Customers}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Vertical" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
</ScrollViewer>
</Grid>
Please note, the "toolkit" namespace comes from clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit. When I hold my finger (or mouse) on the TextBlock, a context menu appears. However, I never see the words "View Customer Profile". I just see a block box that represents the context menu itself. I know that the item is there though. I know because the customerMenuItem_Click event successfully fires. I have a MessageBox in there that shows the value of the Tag. That value is always correct. For some reason though the menu item text is not appearing. What am I doing wrong?
You put Foreground = "White". Context menu is on white background. That is why you don't see your menu item.