Develop Reference

How do you make a Hexagon button?

I want to make a Hexagon button for a specific button in XAML code. Does somebody know how to do that?

You could use a Datatemplate to change the appearance of the button, check this code:
<Button HorizontalAlignment="Center" VerticalAlignment="Center" Margin="305.661,0,180.661,87.258" Background="{x:Null}" BorderBrush="{x:Null}">
<Button.ContentTemplate>
<DataTemplate>
<Grid>
<Polygon Points="25,0 50,0 75,25 75,50 50,75 25,75 0,50 0,25" Stroke="Red" StrokeThickness="3" Fill="LightBlue"></Polygon>
<TextBlock Text="Test" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="36"></TextBlock>
</Grid>
</DataTemplate>
</Button.ContentTemplate>
</Button>

Listbox rows are different each time when scroll

I have listbox control with custom data template. I get the collection from webservice and bind that collection to listbox. When i scroll the list box top to bottom my listbox rows are changed and text are concatenate.
Please see the below images
This is my first screen
when scroll top to bottom once again
please compare two images my rows are changed
<Grid Margin="30,20,0,20" x:Name="MeGrid" Loaded="MeGrid_Loaded" Visibility="{Binding Path=_isMyMessage, Converter={StaticResource BoolToVisibilityConverter}}">
<StackPanel >
<TextBlock HorizontalAlignment="Right" Foreground="#00c0d4" Margin="0,0,100,0" Text="{Binding Path=CreatedDate, Converter={StaticResource TimeSinceConverter}}" />
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
<Grid Background="#ffffff" Height="auto" Width="auto" MaxWidth="300" MinWidth="50">
<StackPanel Background="White">
<RichTextBox Name="MeRich" Background="White" MaxHeight="600" Foreground="Red"
FontFamily="Segoe UI" Margin="10,0,10,0" VerticalAlignment="Center"
TextWrapping="Wrap" Height="auto"
Width="auto" MinWidth="50"
MaxWidth="300"
local:Properties.Html="{Binding Path=MessageText}">
</RichTextBox>
<readMore:Readmore Source="{Binding Path=MessageText}" Visibility="{Binding ActualHeight,
ElementName=MeRich, Converter={StaticResource ReadMoreVisibilityConverter}}" ></readMore:Readmore>
<!--<TextBlock Margin="10,0,10,0" VerticalAlignment="Center" Foreground="Black" TextWrapping="Wrap" Height="auto" Width="auto" MinWidth="50" MaxWidth="300" Text="{Binding Path=MessageText}"
/>-->
<ListBox ScrollViewer.VerticalScrollBarVisibility="Disabled" ItemsSource="{Binding Path=AttachmentList}">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Margin="0,5,0,5">
<Button Click="Image_Download" Loaded="Button_Loaded" Tag="{Binding .}" Width="80" Height="80" >
<Button.Template>
<ControlTemplate TargetType="Button">
<Border HorizontalAlignment="Center" VerticalAlignment="Center" >
<ContentControl Content="{TemplateBinding Content}"/>
</Border>
</ControlTemplate>
</Button.Template>
<Image Source="/Resources/Drawable/c_image.png" Tag="{Binding .}" />
</Button>
<ProgressBar VerticalAlignment="Bottom" IsIndeterminate="true" Visibility="Collapsed" Style="{StaticResource CustomIndeterminateProgressBar}" />
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
</Grid>
<Rectangle Margin="20,0,0,0" VerticalAlignment="Top" RadiusX="50" RadiusY="50" Width="80" Height="80">
<Rectangle.Fill>
<ImageBrush ImageSource="{Binding Path=UserPictureURL}"/>
</Rectangle.Fill>
</Rectangle>
</StackPanel>
</StackPanel>
</Grid>

UWP grid to fill parent window

We are working on a school project and has run into a dead end. We are trying to make the grid fill the entire parent window but we are simply not able to do so.
This is what the designer shows and how we want it to look:
And this is how it looks when we run it:
Here is our xaml code:
<Grid x:Name="Grid" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="{Binding ActualWidth, RelativeSource = {RelativeSource Mode=TemplatedParent}}" Height="{Binding ActualHeight, RelativeSource ={RelativeSource Mode=TemplatedParent}}">
<Grid.Background>
<ImageBrush Stretch="UniformToFill" ImageSource="Assets/france_countryside.jpg" Opacity="0.4" />
</Grid.Background>
<!--Search section-->
<RelativePanel HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="{Binding ElementName=Grid,Path=ActualWidth}">
<TextBlock Text="Find available apartment" FontSize="24" Margin="30" RelativePanel.AlignHorizontalCenterWithPanel="True" />
<AutoSuggestBox Name="AutoSuggestBox"
PlaceholderText="Search"
Width="300"
RelativePanel.AlignHorizontalCenterWithPanel="True"
Margin="0,100,0,0"
TextChanged="AutoSuggestBox_OnTextChanged"
Header="Destination:"/>
<CalendarDatePicker Name="CheckInPicker" Header="Check in:" RelativePanel.Below="AutoSuggestBox" RelativePanel.AlignLeftWith="AutoSuggestBox" Margin="0,40,0,0" PlaceholderText="select a date" IsTodayHighlighted="False"/>
<CalendarDatePicker Name="CheckOutPicker" Header="Check out:" RelativePanel.Below="AutoSuggestBox" RelativePanel.AlignRightWith="AutoSuggestBox" Margin="0,40,0,0"/>
<ComboBox x:Name="numberOfGuestsBox" Width="127" RelativePanel.Below="CheckInPicker" RelativePanel.AlignLeftWith="AutoSuggestBox" Margin="0,30,0,0" PlaceholderText="Choose" Header="Guests:" FontSize="15">
<x:String>1</x:String>
<x:String>2</x:String>
<x:String>3</x:String>
<x:String>4</x:String>
<x:String>5</x:String>
<x:String>6</x:String>
<x:String>7</x:String>
<x:String>8</x:String>
<x:String>9</x:String>
<x:String>10</x:String>
</ComboBox>
<ToggleSwitch Header="Smoking allowed?" Margin="0,30,0,0" RelativePanel.Below="CheckOutPicker" RelativePanel.AlignLeftWith="CheckOutPicker" OffContent="Eew - No!" OnContent="Ya man!"/>
<Button x:Name="SearchButton" Content="Search available apartments" RelativePanel.Below="numberOfGuestsBox" RelativePanel.AlignHorizontalCenterWithPanel="True" Margin="0,30,0,30" Width="300" Height="50" Background="MediumSeaGreen" Foreground="AliceBlue" Click="SearchButton_Click"/>
</RelativePanel>
</Grid>
How do we go about this?
We have tried what to us seems everything with stretching. Margin is not really an option as we want it to be able to re-size.
It seems like (to us) that the grid is fitting the relative panel and shrinks to that size. We are somewhat sure that if we get the grid to fit the screen size of the window the relative panel will be placed in the middle. Thanks for your help in advance!
Edit:
We hold the "views" inside a frame that might be causing the problem. When i re-size the frame the image re-sized and the splitview moves to the "middle" but the scaling doesn't work on the splitview nor the picture.
Here is the code for the splitview:
<!--Split View-->
<SplitView Name="MySplitView"
Grid.Row="1"
DisplayMode="CompactOverlay"
OpenPaneLength="200"
CompactPaneLength="48"
HorizontalAlignment="Left">
<!--SplitView Pane for icons-->
<SplitView.Pane>
<ListBox Name="IconsLIstBox" SelectionMode="Single" SelectionChanged="IconsLIstBox_OnSelectionChanged">
<ListBoxItem Name="HomeListItem">
<StackPanel Orientation="Horizontal">
<TextBlock FontFamily="Segoe MDL2 Assets" FontSize="24" Text=""/>
<TextBlock Text="Home" Margin="20,0,0,0"/>
</StackPanel>
</ListBoxItem>
<ListBoxItem Name="LocationsListBoxItem">
<StackPanel Orientation="Horizontal">
<TextBlock FontFamily="Segoe MDL2 Assets" FontSize="24" Text=""/>
<TextBlock Text="Locations" Margin="20,0,0,0"/>
</StackPanel>
</ListBoxItem>
<ListBoxItem Name="MostPopularListBoxItem">
<StackPanel Orientation="Horizontal">
<TextBlock FontFamily="Segoe MDL2 Assets" FontSize="24" Text=""/>
<TextBlock Text="Most Popular" Margin="20,0,0,0"/>
</StackPanel>
</ListBoxItem>
<ListBoxItem Name="MapListBoxItem">
<StackPanel Orientation="Horizontal">
<TextBlock FontFamily="Segoe MDL2 Assets" FontSize="24" Text=""/>
<TextBlock Text="Map" Margin="20,0,0,0"/>
</StackPanel>
</ListBoxItem>
<ListBoxItem Name="ProfileListBoxItem">
<StackPanel Orientation="Horizontal">
<TextBlock FontFamily="Segoe MDL2 Assets" FontSize="24" Text=""/>
<TextBlock Text="Profile" Margin="20,0,0,0"/>
</StackPanel>
</ListBoxItem>
<ListBoxItem Name="ContactListBoxItem">
<StackPanel Orientation="Horizontal">
<TextBlock FontFamily="Segoe MDL2 Assets" FontSize="24" Text=""/>
<TextBlock Text="Contact" Margin="20,0,0,0"/>
</StackPanel>
</ListBoxItem>
</ListBox>
</SplitView.Pane>
<!--SplitView Content-->
<Frame x:Name="MyFrame" HorizontalAlignment="Left" Width="1043"/>
</SplitView>
</Grid>
We've tried with the frame being inside a splitview.content but there is no difference between the two.

You're trying to hard :) Sometimes XAML can be easy.
Container controls like Grid and RelativePanel automatically scale to the full available size of their parent, while others like StackPanel only grow to the minimal size needed for their child elements. Only the latter type needs HorizontalAlignment="Stretch" and VerticalAlignment="Stretch" to fill the screen. Never bind the Width/Height properties.
This should be enough to go full screen (if your grid is directly under a page and not in a StackPanel or similar control):
<Grid x:Name="Grid">
<Grid.Background>
<ImageBrush Stretch="UniformToFill" ImageSource="Assets/france_countryside.jpg" Opacity="0.4" />
</Grid.Background>
<!--Search section-->
<RelativePanel>
...
</RelativePanel>
</Grid>
Edit in reply to added code of the splitview in the question:
I noticed both SplitView and Frame have HorizontAlignment="Left". That's saying: "instead of using my full screen, only use whatever size you minimally need and align to the left". Remove those assignments and the width of your Frame. Prevent using alignments (left/right/center) or sizes (width/height) when you want to fill your parent control.
<!--Split View-->
<SplitView Name="MySplitView"
Grid.Row="1"
DisplayMode="CompactOverlay"
OpenPaneLength="200"
CompactPaneLength="48">
....
<!--SplitView Content-->
<Frame x:Name="MyFrame" />
</SplitView>

Draw a line inside WPF Dockpanel

How can I draw a line inside dockpanel?
Here
<DockPanel DockPanel.Dock="Bottom"
VerticalAlignment="Center">
<StackPanel DockPanel.Dock="Left"
VerticalAlignment="Center"
Orientation="Horizontal">
<Grid>
<!-- Play button. -->
<Button Name="btnPlay"
Click="btnPlay_Click"
Style="{StaticResource ResourceKey=PlayButton}"></Button>
<!-- Pause button. -->
<Button Name="btnPause"
Click="btnPause_Click"
Style="{StaticResource ResourceKey=PauseButton}"></Button>
</Grid> How to draw a Red color line here with height eqals to content of dockpanel ?
</StackPanel>
</DockPanel>

You should give a name of DockPanel or StackPanel inside it and add separator:
<Separator Width="{Binding ElementName=NameOfDockPanel, Path=ActualWidth}"
Background="Black" />

If you just simply place your "Separator" into the DockPanel rather then inside one of the child item, they will Stack and the "Separator" will have the full height of the DockPanel.
<DockPanel>
<StackPanel DockPanel.Dock="Left">
<TextBlock Text="Some other controls"/>
</StackPanel>
<Border Width="5"
Background="Red"
DockPanel.Dock="Left" />
<StackPanel DockPanel.Dock="Left"
VerticalAlignment="Center"
Orientation="Horizontal">
<TextBlock Text="Buttons and controls"/>
</StackPanel>
</DockPanel>

Use a rectangle and dock it where you want... And fill it as per your requirement..
example

Example for a line around your control (it could be around your dockPanel if you prefer, just put the border a level higher):
<DockPanel Name="MyDockPanel"
DockPanel.Dock="Bottom"
VerticalAlignment="Center">
<Border BorderBrush="Blue"
BorderThickness="3">
<!-- line around control -->
<StackPanel DockPanel.Dock="Left"
VerticalAlignment="Center"
Orientation="Horizontal">
<Grid>
<Button Name="btnPlay"
Click="btnPlay_Click"></Button>
<Button Name="btnPause"
Click="btnPause_Click"></Button>
</Grid>
</StackPanel>
</Border>
</DockPanel>

Example for a line at the bottom:
<DockPanel Name="MyDockPanel"
DockPanel.Dock="Bottom"
VerticalAlignment="Center">
<StackPanel DockPanel.Dock="Left"
VerticalAlignment="Center"
Orientation="Horizontal">
<Grid>
<Button Name="btnPlay"
Click="btnPlay_Click"></Button>
<Button Name="btnPause"
Click="btnPause_Click"></Button>
</Grid>
</StackPanel>
<Line Stroke="Red"
VerticalAlignment="Bottom"
X1="0"
X2="{Binding ActualWidth, ElementName=MyDockPanel}"
StrokeThickness="3"></Line>
</DockPanel>

Separator is a good idea, or you could draw a simple rectangle in the dockpanel:
<DockPanel DockPanel.Dock="Bottom"
VerticalAlignment="Center">
<StackPanel DockPanel.Dock="Left"
VerticalAlignment="Center"
Orientation="Horizontal">
<Grid>
<!-- Play button. -->
<Button Name="btnPlay"
Click="btnPlay_Click"
Style="{StaticResource ResourceKey=PlayButton}"></Button>
<!-- Pause button. -->
<Button Name="btnPause"
Click="btnPause_Click"
Style="{StaticResource ResourceKey=PauseButton}"></Button>
</Grid>
<Rectangle Width="5"
Fill="Red"
Margin="0" />
</StackPanel>
</DockPanel>

template design issue

I have a App.xaml template :
<Application.Resources>
<!-- template for recent history -->
<DataTemplate x:Key="ListViewModelTemplate"> <!-- for recent recepies-->
<Grid Width="400" Height="80" VerticalAlignment="Center">
<StackPanel Orientation="Vertical">
<Border CornerRadius="0" x:Name="brdTesat" BorderBrush="Black" BorderThickness="1" Width="80" Height="80">
<Border.Background>
<ImageBrush x:Name="backgroundImaageBrush" Stretch="Fill">
<ImageBrush.ImageSource>
<BitmapImage x:Name="bmapBackground" UriSource="{Binding imageUriPath}" >
</BitmapImage>
</ImageBrush.ImageSource>
</ImageBrush>
</Border.Background>
</Border>
<StackPanel>
<TextBlock TextAlignment="Left" Margin="7,4,4,4" Text="{Binding title}" TextWrapping="Wrap"></TextBlock>
<TextBlock TextAlignment="Left" Margin="7,4,4,4" Text="{Binding subTitle}" TextWrapping="Wrap"></TextBlock>
</StackPanel>
</StackPanel>
</Grid>
</DataTemplate>
and try to call it to display in a ListBox.. The problem is that the listbox although bound to data, doesn't know how to work with the template. Here is my listbox definition :
<ListBox x:Name="recepiesList" ItemsSource="{Binding recepiesList}" ItemTemplate="{StaticResource ListViewModelTemplate}" >
if i define a template in place, like
<ListBox.Template><DataTemplate><TextBlock text={Binding title} /></DataTemplate></ListBox.Template>
the listbox works great, but i need to correct my Application.Resources one. How can i do so?

Here is the correct DataTemplate
<DataTemplate x:Key="ListViewModelTemplate"> <!-- for recent recepies-->
<!-- for recent recepies-->
<StackPanel Orientation="Horizontal">
<Border CornerRadius="0" x:Name="brdTesat" BorderBrush="White" BorderThickness="1" Width="80" Height="80">
<Border.Background>
<ImageBrush x:Name="backgroundImaageBrush" Stretch="Fill">
<ImageBrush.ImageSource >
<BitmapImage x:Name="bmapBackground" UriSource="{Binding imageUriPath}" >
</BitmapImage>
</ImageBrush.ImageSource>
</ImageBrush>
</Border.Background>
</Border>
<StackPanel >
<TextBlock TextAlignment="Left" Margin="7,4,4,4" Text="{Binding title}" TextWrapping="Wrap"></TextBlock>
<TextBlock TextAlignment="Left" Margin="7,4,4,4" Text="{Binding subTitle}" TextWrapping="Wrap"></TextBlock>
</StackPanel>
</StackPanel>
</DataTemplate>
The Grid seemed to produce a problem..