We Keep Coding

How can I reposition the content of a single cell in a WPF UniformGrid?

I am creating a keypad using a UniformGrid. The keypad has the usual 0-9 buttons, plus a 'Backspace' button. I want the 'Backspace' button to be smaller than the numeric buttons, and so I have applied a RenderTransform to it. All this works fine.
However, I additionally would like the 'Backspace' button to be repositioned (realigned) Right and Bottom within the UniformGrid cell, so that it is away from the numeric buttons.
Below is an image with the red arrow indicating where I would like to move the 'Backspace' button.
I have tried placing the 'Backspace' button inside a ContentControl and setting the HorizontalContentAlignment and VeriticalContentAlignment to Right and Down respectively, but this doesn't work.
Here is some sample XAML:
<UniformGrid Columns="3" Rows="4">
<Button Content="1" />
<Button Content="2" />
<Button Content="3" />
<Button Content="4" />
<Button Content="5" />
<Button Content="6" />
<Button Content="7" />
<Button Content="8" />
<Button Content="9" />
<Button />
<Button Content="0" />
<!--<ContentControl HorizontalContentAlignment="Right" VerticalContentAlignment ="Bottom">-->
<Button Content="X">
<Button.RenderTransform>
<ScaleTransform ScaleX=".75" ScaleY=".75" />
</Button.RenderTransform>
</Button>
<!--</ContentControl>-->
</UniformGrid>
Can this can be done?

Try RenderTransformOrigin
<Button Content="X" RenderTransformOrigin="1, 1">
<Button.RenderTransform>
<ScaleTransform ScaleX=".75" ScaleY=".75" />
</Button.RenderTransform>
</Button>
It should work, however I can't test right now.

Add "File" name on RibbonApplicationMenu in WPF Ribbon

I am new in making WPF projects.
I searched on how to add Text in RibbonApplicationMenu maybe it looks that, there's the same questions to this in this site but trust me I implemented it but didn't works in me.
I've tried putting a "File" name in my <RibbonApplicationMenu>, I put Label="File" but it doesn't work. What can I try next?
Here's my XAML code:
<Ribbon x:Name="Ribbon">
<Ribbon.TitleTemplate>
<DataTemplate >
<TextBlock x:Name="FrontPageTitle" TextAlignment="Center" Text="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Ribbon}}, Path=Title}" Width="{Binding ElementName=RibbonWindow, Path=ActualWidth}" />
</DataTemplate>
</Ribbon.TitleTemplate>
<Ribbon.HelpPaneContent>
<RibbonButton SmallImageSource="pack://application:,,,/MYSEP;component/Images/window.png" />
</Ribbon.HelpPaneContent>
<Ribbon.QuickAccessToolBar>
<RibbonQuickAccessToolBar>
<RibbonButton x:Name="QATButton1"
SmallImageSource="pack://application:,,,/MYSEP;component/Images/window.png" />
<RibbonButton x:Name="QATButton2"
SmallImageSource="pack://application:,,,/MYSEP;component/Images/window.png" />
</RibbonQuickAccessToolBar>
</Ribbon.QuickAccessToolBar>
<Ribbon.ApplicationMenu>
<RibbonApplicationMenu Label="File">
<RibbonApplicationMenuItem Header="New Design Project"
x:Name="NewDesignProject"
ImageSource="pack://application:,,,/MYSEP;component/Images/newProject.png" Click="AddNewDesign"/>
<RibbonApplicationMenuItem Header="New Rating Project"
x:Name="NewRatingProject"
ImageSource="pack://application:,,,/MYSEP;component/Images/newProject.png" Click="AddNewRating"/>
<RibbonApplicationMenuItem Header="Open..."
x:Name="Open"
ImageSource="pack://application:,,,/MYSEP;component/Images/open.png" Click="OpenMysepProject"/>
</RibbonApplicationMenu>
</Ribbon.ApplicationMenu>
<RibbonTab x:Name="HomeTab"
Header="Home">
<RibbonGroup x:Name="Group1"
Header="Project">
<RibbonButton x:Name="Button1"
LargeImageSource="pack://application:,,,/MYSEP;component/Images/manageProject.png"
Label="Manage Project" />
</RibbonGroup>
<RibbonGroup x:Name="Group2"
Header="Vessel">
<RibbonButton x:Name="Button2"
LargeImageSource="pack://application:,,,/MYSEP;component/Images/addVessel.png"
Label="Add Vessel Design Mode" />
<RibbonButton x:Name="Button3"
LargeImageSource="pack://application:,,,/MYSEP;component/Images/info.png"
Label="Add Vessel Rating Mode" />
<RibbonButton x:Name="Button4"
LargeImageSource="pack://application:,,,/MYSEP;component/Images/delete.png"
Label="Delete Vessel" />
</RibbonGroup>
</RibbonTab>
</Ribbon>
Just like this image:

A number of possible (though complicated) solutions here:
How to set text at the head of a RibbonApplicationMenu
EDIT
I tested myself, just add this immediately after <RibbonApplicationMenu>:
<RibbonApplicationMenu.SmallImageSource>
<DrawingImage>
<DrawingImage.Drawing>
<GeometryDrawing>
<GeometryDrawing.Geometry>
<RectangleGeometry Rect="0,0,20,20"></RectangleGeometry>
</GeometryDrawing.Geometry>
<GeometryDrawing.Brush>
<VisualBrush Stretch="Uniform">
<VisualBrush.Visual>
<TextBlock Text="File" FontSize="16" Foreground="White" />
</VisualBrush.Visual>
</VisualBrush>
</GeometryDrawing.Brush>
</GeometryDrawing>
</DrawingImage.Drawing>
</DrawingImage>
</RibbonApplicationMenu.SmallImageSource>
And here you go:

Content Control and Button Flyout

I am making a UWP app and I have come across a problem. I want to make a StackPanel which hosts two ComboBoxes and one TextBox. I can show it in the app if I create it inside the Grid and it works as expected. But for smaller screen devices I want to show a Button in place of the StackPanel and move the StackPanel to the button flyout.
I have tried to add the StackPanel to a ContentControl and then set it as the Flyout but it doesn't work. Flyout needs a FlyoutPresenter control to be able to show the flyout.
I don't want to create multiple StackPanel controls because of the naming collisions, but I do want it simple so I need to make changes to one side of the controls and when the user switches the screen or the view the smaller screen also shows the same stuff.
Can someone help me here? Maybe just point me in the right direction so I can figure it out on my own. Any help will be appreciated. Thanks
StackPanel control:
<StackPanel Orientation="Vertical"
x:Name="PageOptionsPanel"
HorizontalAlignment="Right">
<AppBarButton Label="Refresh"
Icon="Refresh"
Tapped="PageOptions_Tapped"/>
<RelativePanel Margin="10,0">
<TextBlock Text="Sort by:"
Name="SortText"
RelativePanel.AlignVerticalCenterWithPanel="True"
Margin="0,0,5,0"/>
<ComboBox RelativePanel.RightOf="SortText"
x:Name="MSortingBox"
ItemsSource="{Binding EnSortList}"
RelativePanel.AlignVerticalCenterWithPanel="True"
SelectionChanged="MSortingBox_SelectionChanged"
Width="120"/>
</RelativePanel>
<RelativePanel Margin="10,0">
<TextBlock Text="Country: "
Name="CountryText"
RelativePanel.AlignVerticalCenterWithPanel="True"
Margin="0,0,5,0"/>
<ComboBox RelativePanel.RightOf="CountryText"
x:Name="MCountryBox"
ItemsSource="{Binding EnCountryList}"
RelativePanel.AlignVerticalCenterWithPanel="True"
SelectionChanged="MCountryBox_SelectionChanged"
Width="120"/>
</RelativePanel>
</StackPanel>
Flyout control:
<Button>
<Button.Flyout>
<Flyout Placement="Left"
x:Name="MOptionsFlyout"
Content="{StaticResource PageOptionsFlyout}"
Opened="MOptionsFlyout_Opened">
</Flyout>
</Button.Flyout>
</Button>

If I understand your question correctly, you want to share the XAML for your Options layout between the main page and a flyout, based on the size of the page (for phone vs tablet). You can do this by creating a DataTemplate with the layout and adding it to the page's resource dictionary. Then it can be referenced in multiple places.
Here's the code below that does that. It also hides and shows the pieces based on adaptive triggers.
<Page.Resources>
<DataTemplate x:Key="PageOptionsTemplate">
<StackPanel
x:Name="PageOptionsPanel"
HorizontalAlignment="Right"
Orientation="Vertical">
<AppBarButton
Icon="Refresh"
Label="Refresh" />
<RelativePanel Margin="10,0">
<TextBlock
Name="SortText"
Margin="0,0,5,0"
RelativePanel.AlignVerticalCenterWithPanel="True"
Text="Sort by:" />
<ComboBox
x:Name="MSortingBox"
Width="120"
RelativePanel.AlignVerticalCenterWithPanel="True"
RelativePanel.RightOf="SortText"/>
</RelativePanel>
<RelativePanel Margin="10,0">
<TextBlock
Name="CountryText"
Margin="0,0,5,0"
RelativePanel.AlignVerticalCenterWithPanel="True"
Text="Country: " />
<ComboBox
x:Name="MCountryBox"
Width="120"
RelativePanel.AlignVerticalCenterWithPanel="True"
RelativePanel.RightOf="CountryText"
/>
</RelativePanel>
</StackPanel>
</DataTemplate>
</Page.Resources>
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Button Name="OptionsFlyoutButton" Content="Show Me" Visibility="Collapsed">
<Button.Flyout>
<Flyout>
<ContentControl ContentTemplate="{StaticResource PageOptionsTemplate}"/>
</Flyout>
</Button.Flyout>
</Button>
<ContentControl Name="OptionsInLine" Visibility="Visible" ContentTemplate="{StaticResource PageOptionsTemplate}" />
<VisualStateManager.VisualStateGroups>
<VisualStateGroup>
<VisualState>
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="320"/>
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="OptionsInLine.Visibility" Value="Collapsed"/>
<Setter Target="OptionsFlyoutButton.Visibility" Value="Visible"/>
</VisualState.Setters>
</VisualState>
<VisualState>
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="720"/>
</VisualState.StateTriggers>
<VisualState.Setters>
</VisualState.Setters>
</VisualState>
<VisualState>
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="1024"/>
</VisualState.StateTriggers>
<VisualState.Setters>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Grid>
You can also move the DataTemplate out to the application level ResourceDictionary, so that it can be shared between multiple pages.
Finally, another option is to create a user control (using the uwp item template) for this. I recommend creating that if you needed more control over the layout, wanted to encapsulate the logic too, and share it across multiple apps.
For your example, the shared DataTemplate is the easiest path.

Just do this:
<Button Content="Show Me">
<Button.Flyout>
<Flyout>
<StackPanel
x:Name="PageOptionsPanel"
HorizontalAlignment="Right"
Orientation="Vertical">
<AppBarButton
Icon="Refresh"
Label="Refresh" />
<RelativePanel Margin="10,0">
<TextBlock
Name="SortText"
Margin="0,0,5,0"
RelativePanel.AlignVerticalCenterWithPanel="True"
Text="Sort by:" />
<ComboBox
x:Name="MSortingBox"
Width="120"
RelativePanel.AlignVerticalCenterWithPanel="True"
RelativePanel.RightOf="SortText"/>
</RelativePanel>
<RelativePanel Margin="10,0">
<TextBlock
Name="CountryText"
Margin="0,0,5,0"
RelativePanel.AlignVerticalCenterWithPanel="True"
Text="Country: " />
<ComboBox
x:Name="MCountryBox"
Width="120"
RelativePanel.AlignVerticalCenterWithPanel="True"
RelativePanel.RightOf="CountryText"
/>
</RelativePanel>
</StackPanel>
</Flyout>
</Button.Flyout>
</Button>
to get this:
When using the you get an auto display flyout that is shown whenever a user clicks the button, no code needed.
but to add content to that flyout, you need to have another element in it, then the stackpanel goes into it.
Hope this helps you.

multiple stackpanels in ScrollViewer Windows 8 XAML

I seem to be having a problem with adding multiple StackPanels in a ScrollViewer. I can add the first one and it displays the data I want but when I try to add the second StackPanel is fails and brings the error "Duplication assignment to the 'Content' property of the 'ScrollViewer' object"
My front end code is like below:
<ScrollViewer VerticalScrollBarVisibility="Visible"
HorizontalScrollBarVisibility="Visible"
ZoomMode="Disabled"
Grid.Column="1"
Grid.Row="2"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch">
<StackPanel Style='{StaticResource BlueFirstStackPanel}'>
<TextBlock Text='Facility Patient Number:'
Style='{StaticResource TextBlockStyle}' />
<TextBox Style='{StaticResource TextBoxStyle}' />
<TextBlock Text='Patient Number:'
Style='{StaticResource TextBlockStyle}' />
<TextBox Style='{StaticResource TextBoxStyle}' />
<TextBlock Text='Patient Support Number:'
Style='{StaticResource TextBlockStyle}' />
<TextBox Style='{StaticResource TextBoxStyle}' />
<TextBlock Text='NHIF Number:'
Style='{StaticResource TextBlockStyle}' />
<TextBox Style='{StaticResource TextBoxStyle}' />
<TextBlock Text='Patient National ID:'
Style='{StaticResource TextBlockStyle}' />
<TextBox Style='{StaticResource TextBoxStyle}' />
</StackPanel>
</ScrollViewer>
My C# code for the code has this in it:
public sealed class ScrollViewer : ContentControl
{
}
And the above displays very well but when I add a second StackPanel it brings an error. Any help with this?

The ScrollViewer can only have one child control. Try wrapping both StackPanels in a Grid or another StackPanel:
<ScrollViewer>
<StackPanel x:Name="ScrollViewerChild">
<StackPanel x:Name="StackPanel1">
</StackPanel>
<StackPanel x:Name="StackPanel2">
</StackPanel>
</StackPanel>
</ScrollViewer>

Implement Semantic Zoom without listview, Gridview?

I am trying to implement Semantic Zoom control but not with listview, Gridview or grouping. My UI has following XAML
ZoomIn
<!--Your ZoomIn view here-->
<ScrollViewer>
<StackPanel>
<Grid x:Name="Item1" />
<Grid x:Name="Item2" />
<Grid x:Name="Item3" />
<Grid x:Name="Item4" />
<Grid x:Name="Item5" />
</StackPanel>
</ScrollViewer>
ZoomOut
<!--Your ZoomOut view here-->
<ScrollViewer>
<StackPanel>
<Image x:Name="ImageItem1" />
<Image x:Name="ImageItem2" />
<Image x:Name="ImageItem3" />
<Image x:Name="ImageItem4" />
<Image x:Name="ImageItem5" />
</StackPanel>
</ScrollViewer>
On clicking on an image in Zoomout it should take to the corresponding to Grid in Zoomin view.
How can i achieve this? Till now I have implemented Semantic zoom using listview, gridview and grouping.

It's sloppy to use a control like SemanticZoom for controls it is not intended to use.
Having said that, you can do this:
<SemanticZoom>
<SemanticZoom.ZoomedInView>
<GridView>
<GridView.Header>
<StackPanel>
<TextBlock>One</TextBlock>
<TextBlock>Two</TextBlock>
<TextBlock>Three</TextBlock>
</StackPanel>
</GridView.Header>
</GridView>
</SemanticZoom.ZoomedInView>
<SemanticZoom.ZoomedOutView>
<GridView>
<GridView.Header>
<StackPanel>
<TextBlock>Four</TextBlock>
<TextBlock>Five</TextBlock>
<TextBlock>Six</TextBlock>
</StackPanel>
</GridView.Header>
</GridView>
</SemanticZoom.ZoomedOutView>
</SemanticZoom>
Best of luck!