We Keep Coding

How to make a smooth transition from one state to another SplitView UWP

I am trying to make a smooth transition from a closed panel to an open panel and vice versa.
But I don't know how to do it ((
I have an element
<SplitView Style="{StaticResource SplitViewEditMusicTraskStyle}"
CompactPaneLength="0"
PaneBackground="Transparent"
DisplayMode="CompactInline"
IsPaneOpen="{Binding EditPanelIsOpen, Mode=TwoWay}"
OpenPaneLength="308"
Background="Transparent"
PanePlacement="Right">
I could not attach the standard element template because stackoverflov has a limit on the number of characters per stack

How to make a smooth transition from one state to another SplitView UWP
During the testing, if set PanePlacement right, for making SplitView panel open smoothly, please set DisplyMode as Overlay or CompactOverlay.
<SplitView x:Name="splitView" PaneBackground="{ThemeResource SystemControlBackgroundChromeMediumLowBrush}"
IsPaneOpen="False" OpenPaneLength="328" CompactPaneLength="56" DisplayMode="CompactOverlay">
For your requirement, you could also make pop control and set ChildTransitions as PaneThemeTransition to archive smooth transition from a closed panel to an open panel. For more please refer following code.
Xaml code
<Popup
x:Name="RightMeun"
Width="200"
Height="{Binding ElementName=RootGrid, Path=ActualHeight}"
HorizontalAlignment="Right"
IsOpen="False">
<Popup.ChildTransitions>
<TransitionCollection>
<PaneThemeTransition Edge="Right" />
</TransitionCollection>
</Popup.ChildTransitions>
<Grid
Width="200"
Height="{Binding ElementName=RightMeun, Path=Height}"
Background="LightBlue">
<TextBlock
HorizontalAlignment="Center"
VerticalAlignment="Center"
Text="Hello" />
</Grid>
</Popup>

WPF Excel-like Arrow key feature with Textboxes

I have about 600 text boxes side-by-side (looks like a matrix). Each of the text box is named by row and column number. i.e.
textbox_12_25 would be textbox in 12th row and 25th column.
Is there way to implement features like Excel using Arrowkeys and Enter?
I am pretty new to C# and WPF, so a detailed and simple answers would be appreciated.

Use a list box and modify the ItemTemplate and ItemsPanel
<ListBox ItemsSource="{Binding ShippingBays}" FontSize="14" Grid.Row="2" SelectedItem="{Binding SelectedBay}" Background="White" FocusVisualStyle="{x:Null}">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<TextBlock Text="{Binding Description}" FontWeight="SemiBold" FontFamily="Arial" FontSize="12" Padding="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<UniformGrid Columns="{Binding ColumnCount}" Rows="{Binding RowCount}" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
</ListBox>
This is some of the code I wrote for a similar application. Though I do not enter information in the boxes, I just display it. I know this isn't an exact answer but its a way to do it even if you had to modify how you are adding the boxes, etc.
My grid appears with A at the bottom because i'm sorting by RowCount descending, otherwise A would be the top row, just like excel.

ContentControl inside ListBox going outside ListBox when scrolled

I currently have a ListBox that has a DataTemplate (for a custom class) that is a TabControl (bound to a list of charts) that contains a ContentControl (to show the chart).
When I scroll the ListBox, the tabs of the TabControl goes off the screen correctly. However the chart of the ContentControl within the TabControl goes out of the ListBox and over other elements.
Code Sample:
<ListBox x:Name="ListBox" ItemsSource="{Binding ChartItemsList}" ScrollViewer.HorizontalScrollBarVisibility="Disabled" ScrollViewer.VerticalScrollBarVisibility="Visible">
<ListBox.Resources>
<DataTemplate DataType="{x:Type m:ChartItemsWrapper}">
<StackPanel Orientation="Horizontal">
<shared:PixelSnapper>
<TabControl Background="White" BorderBrush="DarkGray" ItemsSource="{Binding Items}" Margin="3,0" Padding="0" TabStripPlacement="Right">
<TabControl.ContentTemplate>
<DataTemplate>
<DockPanel LastChildFill="True">
<Border BorderBrush="DarkGray" BorderThickness="0,1,0,0">
<Grid Background="White">
<Stuff>
<Grid Margin="0,25,0,0">
<ContentControl Content="{Binding Chart}" Visibility="Collapsed" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" x:Name="mainChart"/>
</Grid>
</Grid>
</Border>
</DockPanel>
<DataTemplate.Triggers ... />
</DataTemplate>
</TabControl.ContentTemplate>
<TabControl.ItemTemplate ... />
<TabControl.ItemContainerStyle ... />
</TabControl>
</shared:PixelSnapper>
</StackPanel>
</DataTemplate>
</ListBox.Resources>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel FlowDirection="LeftToRight" IsItemsHost="True" Orientation="Horizontal"></WrapPanel>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
I tried setting ZIndexes, changing the binding, but it just seems that ListBoxes and ContentControls don't mix. Any help would be appreciated.

Add HorizontalContentAlignment="Stretch" to your ListBox.
I had similar issue before and this fixed my issue.

Other than HorizontalContentAlignment="Stretch" suggested by vishakh369, you can also try ClipToBounds="True". Not sure what are the differences though, maybe you can try it out to see which one does it better.

Sorry this is not going to be the answer most people in the future will find useful but in my particular case the binding of <ContentControl Content="{Binding Chart}" .../> was pointing to a chart that can only be displayed within a WinFormHost.
Since WinForms and WPF are different rendering technologies, and WinForms UI elements will always be overlaid over WPF ones which is causing my WinForm charts to go outside the ListBox when they were supposed to be scrolled "off screen."
For more on this, refer to this stackoverflow question or this MSDN post. A note, in my research, some people were saying this problem was fixed in the .NET 4.5 release but it seems that it was not due to complications and had to be dropped from the release (see link).

Two longlistselectors or two columns of different data binding within longlistselector. Possible?

I am trying to figure out how to have two columns of different binded data on one page. The left column for sounds the right for a save ringtone task for each sound.
I can't put two longlistselectors on one page, it wont let me.
Using a sample, its easy to see how to used binded data for the sound. And the great thing is you only have to enter new code into the binded items and it automatically populates each page with new sound tiles.
Id like to add a save ringtone tile that would essentially work the same way. But it would only make sense if I can get the save ringtone tiles next to the sound tiles on the same page.
Is there any way to do this? All I really need to know, I think, is how to get two columns of different data bindings onto the same page, hopefully in a longlistselector so it will scroll.
Here is a sample of the code im using now.
<phone:PhoneApplicationPage.Resources>
<DataTemplate x:Key="SoundTileDataTemplate">
<Grid Background="{StaticResource PhoneAccentBrush}"
Margin="0,0,135,0">
<Grid VerticalAlignment="Top"
HorizontalAlignment="right"
Width="40"
Height="40"
Margin="0, 6, 6, 0">
<Ellipse Stroke="{StaticResource PhoneForegroundBrush}"
StrokeThickness="3"/>
<Image Source="/Assets/AppBar/Play.png" />
</Grid>
<StackPanel VerticalAlignment="bottom">
<TextBlock Text="{Binding Title}"
Margin="6,0,0,6"/>
</StackPanel>
</Grid>
</DataTemplate>
</phone:PhoneApplicationPage.Resources>
<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">
<!--Pivot Control-->
<phone:Pivot Title="{Binding Path=LocalizedResources.ApplicationTitle,
Source={StaticResource LocalizedStrings}}">
<!--Pivot item one-->
<phone:PivotItem Header="{Binding Animals.Title}">
<!--Double line list with text wrapping-->
<phone:LongListSelector Margin="0,0,-12,0"
ItemsSource="{Binding Animals.Items}"
LayoutMode="List"
ItemTemplate="{StaticResource SoundTileDataTemplate}"
SelectionChanged="LongListSelector_SelectionChanged">
</phone:LongListSelector>
</phone:PivotItem>
</phone:Pivot>
</Grid>

Easy solution.
<DataTemplate x:Key="NewItemTemplate">
<StackPanel HorizontalAlignment="Left" Orientation="Horizontal" >
<StackPanel Orientation="Horizontal" Width="56">
<CheckBox x:Name="CheckBox1" HorizontalAlignment="Left" IsChecked="{Binding Checked, Mode=TwoWay}" BorderBrush="Black" Style="{StaticResource CheckBoxStyleGrey1}" Width="90" Height="74" />
</StackPanel>
<StackPanel Orientation="Horizontal" RenderTransformOrigin="0.5,0.5" Width="803" >
<StackPanel.RenderTransform>
<CompositeTransform ScaleX="-1"/>
</StackPanel.RenderTransform>
<TextBlock Text="{Binding lItem}" Foreground="Black" FontSize="45" Margin="-176,0,0,0" RenderTransformOrigin="0.5,0.5">
<TextBlock.RenderTransform>
<CompositeTransform ScaleX="-1"/>
</TextBlock.RenderTransform>
</TextBlock>
<TextBlock Text="{Binding lCategory}" Foreground="Black" Margin="-146,0,-2,0" RenderTransformOrigin="0.5,0.5" >
<TextBlock.RenderTransform>
<CompositeTransform ScaleX="-1"/>
</TextBlock.RenderTransform>
</TextBlock>
</StackPanel>
</StackPanel>
</DataTemplate>
Edit the ItemTemplate based on your needs, and you might have to play around with it in blend if there is an error. In Blend, go to your long list selector and edit the item template.

First of all, by aiming to add 2 long list selectors next to each other, you are approaching to this problem from a very wrong perspective. That's bad for the user, bad for UX, bad for the sake of UI design and bad for the unicorns.
You are trying to associate a functionality (Save ringtone) within another LongListSelector, to the corresponding Item in another Long List Selector. What an earth made you think that adding another Long List Selector and populating it with many Save Ringtone buttons is going to solve your problem? For a second, let's say you somehow achieve adding two Long List Selectors next to each other and deployed your items on the left selector and save ringtone buttons on the right. How you are planning to correctly associate them when they are scrolled? User will scroll the left one and the right Long List Selector will remain static.
You shouldn't add one more Long List Selector to your front. Instead you should go and modify your ItemTemplate in one Long List Selector. Then you will be able to have more than one tile, button, text or whatever you need for one single LongListSelector Item.
ItemTemplate="{StaticResource SoundTileDataTemplate}"
I am not going to submit a solution to add more than one button/tile/text for one LongListSelector item and associate their communication/functionality. Because there are already some 5 million example on the internet about this.
I highly recommend reading Design Guidelines for Windows Phone for you. Because you have such ideas that will result as one more crappy app on the Store. People really got enough of crappy apps. So please either completely stop developing apps for Windows Phone or give a break to whatever you are doing now and go read the design principles.

ItemDroppedOnTarget in DragDropTarget should have target element

I'm using DragDropListBoxTarget control from Silverlight Toolkit to support the drag and drop behavior. But I'm facing with a problem with this control.
It's hard to get hold of target element on which the item is dropped. It is a must to have thing in ItemDroppedOnTarget event arguments.
When I drag an item, I need when the user drops it, an intermediate event should modify the target Item. But I can't find the way to implement it.
Am I using the right control, or what another alternatively do I have?

I had the same problem. I ended up using this drag-drop tool. I recompiled the source for Silverlight 5. It lets me know the target. I was also lazy and still wanted the ghost-drag pic of whatever you're dragging when using the toolkit DragDropTarget controls, so I kept my source wrapped in that and also wrapped in the new drag-drop tool.
The way I defined the dragging:
<toolkit:ListBoxDragDropTarget AllowedSourceEffects="Copy">
<ListBox ItemsSource="{Binding Path=UnitOfWork.Templates}" Width="130" Height="360" BorderThickness="0">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel>
<dd:DragSource>
<TextBlock Text="{Binding Path=Name}" Width="120"/>
</dd:DragSource>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</toolkit:ListBoxDragDropTarget>
<dd:DropTarget Grid.Row="2" AllowDrop="True" OnDropped="Target_OnDropped">
<Border BorderBrush="Black" BorderThickness="1" Width="98" Height="30">
<TextBlock Text="Drop Here" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</dd:DropTarget>
This way keeps the dragging ghost that the ListBoxDragDropTarget creates, while allowing me to use the dd:DragSource and dd:DropTarget controls to allow finer-grained drag-drops.