We Keep Coding

How to make the sidebar transition?

I have a simple splitview that has a rectangle of width 4px that indicates the selected item in the spiltview.
<Rectangle HorizontalAlignment="Left" VerticalAlignment="Top"
Width="4" Height="48" Margin="1,0"
Fill="{ThemeResource SystemAccentColor}" Grid.Row="2"
Visibility="{x:Bind btnHome.IsChecked, Mode=OneWay}"/>
Right now I've multiple rectangles turned on/off depending whether the checkbox is selected or not! But instead, I want a single rectangle in my code that should transition from the place where it previously was to place where the user has clicked.

Simplest for you would be using the new NavigationView if your minimum version is set to Fall Creators Update or use the HamburgerMenu control from UWP Community Toolkit (note that it's updated to use style very similar to yours, the docs aren't just updated with current screenshots). You can download the UWP Community Toolkit Sample App from Windows Store if you want to see how it currently looks.
If you want to use your custom solution, you should create a custom style or rather edit an existing style of the control you're using as hamburger menu items. Default styles are available for example here.

Getting CefSharp to correctly handle PDF files in WPF

This problem does not impact WinForms.
I have downloaded the bare minimum example from the github site:
https://github.com/cefsharp/CefSharp.MinimalExample
As far as I am reasonably aware everything is up-to-date - I have used NuGet to make sure the latest CefSharp.Common, CefSharp.Wpf etc have been installed - currently version 53.
When I use it to browse web pages it's fine. The problem is when I attempt to view a PDF-based page eg:
http://www.cbu.edu.zm/downloads/pdf-sample.pdf
So in the MainWindow.xaml I bind the 'Address' property to this value instead of "www.google.com":
<Window x:Class="CefSharp.MinimalExample.Wpf.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:wpf="clr-namespace:CefSharp.Wpf;assembly=CefSharp.Wpf"
Title="{Binding Path=Title, ElementName=Browser, Converter={StaticResource TitleConverter}}"
WindowState="Maximized">
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<wpf:ChromiumWebBrowser Grid.Row="0"
x:Name="Browser"
Address="http://www.cbu.edu.zm/downloads/pdf-sample.pdf" />
<StatusBar Grid.Row="1">
<ProgressBar HorizontalAlignment="Right"
IsIndeterminate="{Binding IsLoading, ElementName=Browser}"
Width="100"
Height="16"
Margin="3" />
<Separator />
<!-- TODO: Could show hover link URL here -->
<TextBlock Text="{Binding Address, ElementName=Browser}"/>
</StatusBar>
</Grid>
When I run the example, in order to navigate to this PDF, the screen remains blank and the progress control does not update:
... unless I do something like un-maximise the browser window, or move it etc, then I can view it:
After this there is another strange problem whereby the scrollbars and +/- buttons appear to be unresponsive. I notice that if I do press the '+' button for example and then another action such as maximize/restore - then the intended '+' action appears to have been carried out. Ditto the scrollbar and other actions.
It does not exhibit this behaviour for the WinForms minimal example, if this helps, only the Wpf.
Any suggestions greatly appreciated.

This has been raised as a duplicate of issue #1799 over at the GitHub site:
WPF/OffScreen PDF Viewer not working #1799
Until Version 55 is released, the solution as stated on the site is:
"Suggested workaround is to call Invalidate() on a timer as proposed on ceforum
You can roll back to 51 and use disable-surfaces or wait for version 55 to be released."
I found that rolling back to a previous version worked for me.
UPDATE 21 Jan 2019
This is no longer an issue with the more recent versions of CefSharp.

How do I use a button in Windows Phone 8 hub app

I am trying to change the context of a button inside a DataTemplate, but in my code-behind I can't acses it. What am I doing wrong?
Here is the XAML I am using:
<Grid>
<Hub>
<HubSection>
<DataTemplate>
<Grid>
<Button x:Name="THEbutten" Content="Button" HorizontalAlignment="Left" Margin="186,230,0,0" VerticalAlignment="Top"/>
</Grid>
</DataTemplate>
</HubSection>
</Hub>
</Grid>

Your Button is inside a DataTemplate, and therefore it is in a different context than the page and not accessible from it's codebehind.
Consider the following options:
Modify your Buttons Properties using Data Binding.
Create a UserControl for your HubSections Content.
Sadly, the Hub Control is fairly hard to understand and use for beginners, because of this DataTemplate.
Here are some tutorials:
Mikaelkoskinen - Getting started
DotNetCurry - The Windows 8.1 Hub Control
There are also several questions around here on that topic:
How to access controls within hubsections

Pivot overlapping other elements in WP 8.1 Universal app (and automatically changing margin)

The following XAML shows the content of a Windows Phone 8.1 Universal app page. The idea is to have a bar on top of a pivot. But the pivot is overlapping the bar whereas the sample grid in blue is working as expected.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="50" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid Background="{StaticResource PhoneAccentBrush}" Height="50" />
<Pivot Grid.Row="1" Background="Green" Width="200" HorizontalAlignment="Left" />
<Grid Grid.Row="1" Background="Blue" Width="200" HorizontalAlignment="Right" />
</Grid>
The resulting Page looks like this:
Where is this "negative margin" coming from?
How can it be avoided?
BTW: Just setting a margin is not a solution as it introduces other problems, for example a jumping GUI when using a SemanticZoom control, I need to know the root cause of the problem to solve it...
Info: It seems that the Windows Phone Pivot automatically changes the margin depending on the current screen settings (status bar shown/hidden). So if your app changes the state of the status bar in some circumstances you will end up having a jumping/changing pivot control.

I've found a solution and created a simple attached property for the Pivot control.
The attached property can be used this way:
<Pivot controls:PivotExtensions.DisableAutoMargin="True">
<PivotItem Header="A">
...
</PivotItem>
<PivotItem Header="B">
...
</PivotItem>
</Pivot>
The class with the attached property can be found here:
http://mytoolkit.codeplex.com/SourceControl/latest#MyToolkit.Extended.WinRT/Controls/PivotExtensions.cs
Downside: You cannot override the template anymore as the attached property changes the template already...

Overriding the control template doesn't seem to work; there is some code in the control that's setting the margin after construction. Also setting the Margin on the offending grid on the Loaded event doesn't work either, the negative margin code runs after that.
The only way I found to make the odd behavior go away was to ask your UI to overlap the status bar:
ApplicationView.GetForCurrentView()
.SetDesiredBoundsMode(ApplicationViewBoundsMode.UseCoreWindow);
Then the Pivot control figures that it doesn't need to try and cover the status bar. Note that you'll now have to give room in your page layout to prevent overlap with the status bar.

Add popup menu to AppBarButton

I want to add a contextual menu to a button from the appBar(bottom appBar). My min SDK is Windows 8.0. I would like something like this popup from MSDN:
Unfortunately I cannot use MenuFlyout since it is available only from Windows 8.1+, so I want to achieve this menu in another way. If you know how it can be done, please tell me.
Below is my bottom bar:
<common:LayoutAwarePage.BottomAppBar>
<AppBar x:Name="bottomAppBar" Padding="10,0,10,0" DataContext="{Binding}">
<Grid>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
<Button Style="{StaticResource EditAppBarButtonStyle}" Click="EditQuote_Click"/>
<Button Style="{StaticResource RemoveAppBarButtonStyle}" Click="RemoveQuote_Click"/>
<Button Style="{StaticResource AddAppBarButtonStyle}" Click="AddQuote_Click"/>
</StackPanel>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
<Button Style="{StaticResource HelpAppBarButtonStyle}"/>
</StackPanel>
</Grid>
</AppBar>

You should take a look at the Flyout Settings sample at:
http://code.msdn.microsoft.com/windowsapps/Settings-Flyout-eceaafea
Or if you are targeting Windows 8.1, flyouts have become much easier, check the MenuFlyout element:
http://msdn.microsoft.com/en-us/library/windows/apps/bg182878.aspx#menuflyout

I would look at the Callisto library on Nuget. It's built by Tim Heuer who's one of the guys working on the xaml team at Microsoft and fills in some of the gaps in the 8.0 control set. It includes a Menu Flyout control that looks not that coincidentally like the controls added in 8.1.
The samples app in the project includes an example of what you're looking for (a Menu Flyout from an App Bar).
Edit: If you're targeting Windows 8.1 with your project then the Menu Flyout control is now built into the platform.