In my WPF application, i created a dockpanel with a stackpanel with orientation=horizontal.
I add some buttons on my stackpanel ( like a toolbar)
I would like to be able to set my last item on my stackpanel to be attached to the right of my window.
Some picture in order to explain.
What i have :
What i would to have :
Here is my XAML :
<DockPanel Height="40" VerticalAlignment="Top" >
<Border>
<StackPanel Orientation="Horizontal" Background="{StaticResource DegradeCouleurTheme}">
<Image Source="ElipseGauche.png" Height="28" Margin="10,0,0,0" />
<StackPanel Orientation="Horizontal" Height="28">
<StackPanel.Background>
<ImageBrush ImageSource="ElipseMilieu.png"></ImageBrush>
</StackPanel.Background>
<Button Template="{StaticResource BoutonRessourcesTpl}" Click="Button_Click_Goto_Premier">
<Image Source= "xRtDiva_XWPF_TBR_PREMIER.PNG_IMAGES.png" Height="16"/>
</Button>
<Button Template="{StaticResource BoutonRessourcesTpl}" Click="Button_Click_Goto_Precedent">
<Image Source= "xRtDiva_XWPF_TBR_PRECED.PNG_IMAGES.png" Height="16"/>
</Button>
<Button Template="{StaticResource BoutonRessourcesTpl}" Click="Button_Click_Goto_Suivant">
<Image Source= "xRtDiva_XWPF_TBR_SUIVANT.PNG_IMAGES.png" Height="16"/>
</Button>
<Button Template="{StaticResource BoutonRessourcesTpl}" Click="Button_Click_Goto_Dernier">
<Image Source= "xRtDiva_XWPF_TBR_DERNIER.PNG_IMAGES.png" Height="16"/>
</Button>
</StackPanel>
<Image Source="ElipseDroite.png" Height="28" Margin="0,0,0,0" />
<Image Source="ElipseGauche.png" Height="28" Margin="15,0,0,0" />
<StackPanel Orientation="Horizontal" Height="28">
<StackPanel.Background>
<ImageBrush ImageSource="ElipseMilieu.png"></ImageBrush>
</StackPanel.Background>
<Button Template="{StaticResource BoutonRessourcesTpl}" Click="Button_Click_Creer" >
<Image Source= "Toolbar_Creer.png" Height="16" />
</Button>
</StackPanel>
<Image Source="ElipseDroite.png" Height="28" Margin="0,0,0,0" />
<Image Source="ElipseGauche.png" Height="28" Margin="15,0,0,0" />
<StackPanel Orientation="Horizontal" Height="28">
<StackPanel.Background>
<ImageBrush ImageSource="ElipseMilieu.png"></ImageBrush>
</StackPanel.Background>
<Button Template="{StaticResource BoutonRessourcesTpl}" Click="Button_Click_Evenement_Supprimer">
<Image Source= "Toolbar_Supprimer.png" Height="16"/>
</Button>
</StackPanel>
<Image Source="ElipseDroite.png" Height="28" Margin="0,0,0,0" />
<Image Source="ElipseGauche.png" Height="28" Margin="15,0,0,0" />
<StackPanel Orientation="Horizontal" Height="28">
<StackPanel.Background>
<ImageBrush ImageSource="ElipseMilieu.png"></ImageBrush>
</StackPanel.Background>
<Button Template="{StaticResource BoutonRessourcesTpl}" Click="Button_Click_Evenement_Joints">
<Image Source= "Toolbar_FicJoints.png" Height="18"/>
</Button>
</StackPanel>
<Image Source="ElipseDroite.png" Height="28" Margin="0,0,0,0" />
<Image Source="ElipseGauche.png" Height="28" Margin="15,0,0,0" />
<StackPanel Orientation="Horizontal" Height="28">
<StackPanel.Background>
<ImageBrush ImageSource="ElipseMilieu.png"></ImageBrush>
</StackPanel.Background>
<Button Template="{StaticResource BoutonRessourcesTpl}" Click="Button_Click_Evenement_Annuler" >
<Image Source= "Toolbar_Annuler.png" Height="16"/>
</Button>
<Button Template="{StaticResource BoutonRessourcesTpl}" Click="Button_Click_Evenement_Valider">
<Image Source= "Toolbar_Valider.png" Height="16"/>
</Button>
</StackPanel>
<Image Source="ElipseDroite.png" Height="28" Margin="0,0,0,0" />
<Image Source="ElipseGauche.png" Height="28" Margin="15,0,0,0" />
<StackPanel Orientation="Horizontal" Height="28">
<StackPanel.Background>
<ImageBrush ImageSource="ElipseMilieu.png"></ImageBrush>
</StackPanel.Background>
<Button Template="{StaticResource BoutonRessourcesTpl}" Click="Button_Click_App_Parametrer" >
<Image Source= "Toolbar_Parametrer.png" Height="16"/>
</Button>
</StackPanel>
<Image Source="ElipseDroite.png" Height="28" Margin="0,0,0,0" />
<Grid HorizontalAlignment="Right">
<StackPanel Orientation="Horizontal" Height="28" >
<Image Source="ElipseGauche.png" Height="28" Margin="15,0,0,0" />
<StackPanel Orientation="Horizontal" Height="28">
<StackPanel.Background>
<ImageBrush ImageSource="ElipseMilieu.png"></ImageBrush>
</StackPanel.Background>
<Button Template="{StaticResource BoutonRessourcesTpl}" Click="Button_Click_About" >
<Label Margin="0,0,0,1" Foreground="White" Content="About" Height="16" VerticalAlignment="Center" HorizontalAlignment="Center" Padding="0,0,0,0"/>
</Button>
</StackPanel>
<Image Source="ElipseDroite.png" Height="28" Margin="0,0,0,0" />
</StackPanel>
</Grid>
</StackPanel>
</Border>
</DockPanel>
I tried to use a grid with horizontalaligneemnt = right on the last item of my stackpanel but it has no effect ( and it's logic !)
Anyone could help me please ?
Thanks a lot :)
You can not do this with a StackPanel. You will need to use a DockPanel or Grid instead.
You can use Grid and Grid children to attack Objecs on the direction: Left, Right, Tip, Bottom and Center.
I did a example with two images on Bottom left and Bottom right:
<Window x:Class="NameClass">
<Grid Name="Grid 1">
<Grid Name="Grid 1.1" VerticalAlignment="Bottom">
<Grid Name="Grid 1.1.1" HorizontalAlignment="Left">
<StackPanel>
<StackPanel Orientation="Horizontal">
<Image HorizontalAlignment="Left" Source="/left.jpg"/>
</StackPanel>
</StackPanel>
</Grid>
<Grid Name="Grid 1.1.2" HorizontalAlignment="Right">
<StackPanel>
<StackPanel Orientation="Horizontal">
<Image HorizontalAlignment="Right" Source="/right.jpg"/>
</StackPanel>
</StackPanel>
</Grid>
</Grid>
</Grid>
</Window>
Structure explained:
Grid 1 is Main Grid.
Grid 1.1 to the desired the main address, in this case is Bottom.
Grid 1.1.1 and Grid 1.1.2 contain the specific addresses to each <Image>. For this case the StackPanel are used.
<StackPanel/> is the main container to fill the Grid 1.1.x.
<StackPanel Orientation="Horizontal"/> to use only one row
<Image HorizontalAlignment={one direction}/> to locate on the bottom grid, can be on right, left or center.
Result:
PD: I used this video for understand the concept on XAML WPF. Stack Panels & Dock Panels. I found a solution, with trial and error.
You can do this by using in StackPanel
Orientation="Horizontal"
Related
So I struggle with the XAML alignment a bit and I hoped for someone who could help me get trough it.
This is the Code. I will break it down below:
<Grid x:Name="Output" HorizontalAlignment="Left" VerticalAlignment="Top" Grid.Row="0">
<StackPanel>
<Button Style="{StaticResource AppBarButtonStyle}" Click="ShowPopupOffsetClicked"/>
<Image Source="Assets/images/icon_thumbnail.png"></Image>
</StackPanel>
<Popup VerticalOffset="60" HorizontalOffset="0" x:Name="StandardPopup">
<Border BorderBrush="{StaticResource ApplicationForegroundThemeBrush}"
Background="{StaticResource ApplicationPageBackgroundThemeBrush}"
BorderThickness="2" Width="300" Height="350">
<StackPanel >
<TextBlock>
<Run x:Name="MyRun" Text=""/>
</TextBlock>
<StackPanel Orientation="Horizontal">
<StackPanel HorizontalAlignment="Left" VerticalAlignment="Top">
<TextBox x:Name="searchTextBox" Width="200" Height="30" />
</StackPanel>
<StackPanel HorizontalAlignment="Right" VerticalAlignment="Top">
<Button x:Name="firstSearch" Style="{StaticResource AppBarButtonStyle}" Tapped="OnOptionItemTapped" >
<Image Source="Assets/images/view_search.png"/>
</Button>
</StackPanel>
</StackPanel>
<StackPanel Orientation="Horizontal">
<Button x:Name="previous" Style="{StaticResource AppBarButtonStyle}" Tapped="OnOptionItemTapped">
<Image Source="/Assets/images/left_arrow.png"/>
</Button>
<Button x:Name="next" Style="{StaticResource AppBarButtonStyle}" Tapped="OnOptionItemTapped">
<Image Source="/Assets/images/right_arrow.png"/>
</Button>
</StackPanel>
<Button Content="Close" Click="ClosePopupClicked" HorizontalAlignment="Center" VerticalAlignment="Bottom"/>
</StackPanel>
</Border>
</Popup>
</Grid>
This part will be MyRun Text later:
<TextBlock>
<Run x:Name="MyRun" Text=""/>
</TextBlock>
This part is the SearchBar and the search-button which should be perfectly in line. How do I do this?
<StackPanel Orientation="Horizontal">
<StackPanel HorizontalAlignment="Left" VerticalAlignment="Top">
<TextBox x:Name="searchTextBox" Width="200" Height="30" />
</StackPanel>
<StackPanel HorizontalAlignment="Right" VerticalAlignment="Top">
<Button x:Name="firstSearch" Style="{StaticResource AppBarButtonStyle}" Tapped="OnOptionItemTapped" >
<Image Source="Assets/images/view_search.png"/>
</Button>
</StackPanel>
</StackPanel>
This is the next and previous button. It should be perfectly in line with MyRun. How would I do that?
<StackPanel Orientation="Horizontal">
<Button x:Name="previous" Style="{StaticResource AppBarButtonStyle}" Tapped="OnOptionItemTapped">
<Image Source="/Assets/images/left_arrow.png"/>
</Button>
<Button x:Name="next" Style="{StaticResource AppBarButtonStyle}" Tapped="OnOptionItemTapped">
<Image Source="/Assets/images/right_arrow.png"/>
</Button>
</StackPanel>
And at last will be the "Close" Button. I guess it is kinda already perfect?:
<Button Content="Close" Click="ClosePopupClicked" HorizontalAlignment="Center" VerticalAlignment="Bottom"/>
Now a screenshot of how it Looks like and how I want it to look:
This is how it is:
This is how I want it to be:
I know that I can Change the height of the popup. But when I Change the height some Things disappear (for example the close Botton won't be visible because it is too far down while the popup height is too low).
Sorry for the long post. I hope someone can help me out here.
You should be able to use a Grid with three RowDefinitions. Something like this:
<Popup VerticalOffset="60" HorizontalOffset="0" x:Name="StandardPopup">
<Border BorderBrush="{StaticResource ApplicationForegroundThemeBrush}"
Background="{StaticResource ApplicationPageBackgroundThemeBrush}"
BorderThickness="2" Width="300" Height="350">
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<!-- row 1 -->
<StackPanel Orientation="Horizontal">
<TextBox x:Name="searchTextBox" Width="200" Height="30" Margin="0,0,3,0" />
<Button x:Name="firstSearch" Style="{StaticResource AppBarButtonStyle}" Tapped="OnOptionItemTapped" >
<Image Source="Assets/images/view_search.png"/>
</Button>
</StackPanel>
<!-- row 2 -->
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<StackPanel Orientation="Horizontal">
<Button x:Name="previous" Style="{StaticResource AppBarButtonStyle}" Tapped="OnOptionItemTapped">
<Image Source="/Assets/images/left_arrow.png"/>
</Button>
<Button x:Name="next" Style="{StaticResource AppBarButtonStyle}" Tapped="OnOptionItemTapped">
<Image Source="/Assets/images/right_arrow.png"/>
</Button>
</StackPanel>
<TextBlock Grid.Column="1" HorizontalAlignment="Center">
<Run x:Name="MyRun" Text=""/>
</TextBlock>
</Grid>
<!-- row 3 -->
<Button Grid.Row="2"
Content="Close" Click="ClosePopupClicked"
HorizontalAlignment="Center" VerticalAlignment="Bottom"/>
</Grid>
</Border>
</Popup>
You can adjust the space between the controls using the Margin property.
What are the panels and containers that allow overlapping with varying z-index ? (escluding Canvas)
--Since I was asked for details this is part of the code:
<DockPanel HorizontalAlignment="Left" Height="32" LastChildFill="False" Margin="10,0,0,10"
VerticalAlignment="Top">
<Rectangle Fill="{Binding (extensions:PaletteColor.FillBrush)}" Height="32" RadiusY="4"
RadiusX="4"
Stroke="#FF000000" Width="32" HorizontalAlignment="Left" VerticalAlignment="Top"
MouseLeftButtonUp="TargetColorClick"
ToolTip="{Binding (extensions:PaletteColor.Name)}" />
Ok I was able to do this with Clemens support:
<TextBlock TextWrapping="Wrap" Text="16"
Margin="-32,0,0,0" Height="16"
HorizontalAlignment="Center" />
--Answering to another question my XAML for whole control looks like this:
<ItemsControl ItemsSource="{Binding (local:MainWindow.CurrentPaletteSet)}" Width="400" Margin="665,67,14,-67">
<ItemsControl.ItemTemplate>
<DataTemplate>
<DockPanel HorizontalAlignment="Left" Height="32" LastChildFill="False" Margin="10,0,0,10"
VerticalAlignment="Top">
<Rectangle Fill="{Binding (extensions:PaletteColor.FillBrush)}" Height="32" RadiusY="4"
RadiusX="4"
Stroke="#FF000000" Width="32" HorizontalAlignment="Left" VerticalAlignment="Top"
MouseLeftButtonUp="TargetColorClick"
ToolTip="{Binding (extensions:PaletteColor.Name)}" />
<TextBlock TextWrapping="Wrap" Text="16"
Margin="-32,0,0,0" Height="16"
HorizontalAlignment="Center" />
<TextBlock TextWrapping="Wrap" Text="{Binding (extensions:PaletteColor.FullRgbString)}"
Margin="5,0,0,0" Height="16"
HorizontalAlignment="Left" DockPanel.Dock="Top" />
<TextBlock TextWrapping="Wrap" Text="{Binding (extensions:PaletteColor.FullHslString)}"
Margin="5,0,0,0"
Height="16" HorizontalAlignment="Left" DockPanel.Dock="Top" MinWidth="121" />
</DockPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel></ItemsControl>
I have a WPF application with one window. In that window I have several StackPanels and several Buttons. White can find each Button perfectly, but with exact the same code just one single Button is seldom found and often not found. I was unable to find out what the cause is for this behaviour. Thats why I came to you guys.
Note: Before the buttons are shown, there is another view (in the same window) that waits for the server to respond. As soon as the response is in, the buttons get displayed.
Here my testcode:
[TestMethod]
public void ClickBarPayment_ViewExchanges()
{
DelayedStart(5);
Application app = null;
try
{
app = Application.Launch(SutPath);
try
{
var window = app.GetWindow("CfeMain");
var button = (Button)window.Get(SearchCriteria.ByAutomationId("CashButton"), TimeSpan.FromSeconds(60));
button.Click();
Assert.AreEqual(false, button.Visible);
}
catch (Exception e)
{
Assert.Fail(e.Message);
}
}
finally
{
app?.Close();
}
}
You can assume, that the Buttons are all equal and all have a Tag " Name="" ". Here is the XAML code, I remove unnecessary names with "Blabla" a.s.o.
<StackPanel Name="PaymentContent" Visibility="Visible" VerticalAlignment="Center" Margin="0,0,0,0">
<StackPanel Height="60" VerticalAlignment="top" Margin="20,0,10,0">
<TextBlock FontSize="24" Foreground="#0b0b0b" Name="info" HorizontalAlignment="Stretch">Bla</TextBlock>
</StackPanel>
<StackPanel Name="options" Orientation="Vertical" HorizontalAlignment="Center" Grid.RowSpan="2" Width="1004">
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="5,15,5,0">
...
...
</StackPanel>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="5,0,5,5">
<Button Name="Blablabla" Click="Blablabl_OnClick" Style="{StaticResource MainButtonBottomLeft}" Background="#efefef" Margin="0,10,10,0" HorizontalAlignment="Center" Width="490" Height="200">
<StackPanel Orientation="Vertical" HorizontalAlignment="Left" Width="400" Height="200">
<TextBlock FontSize="28" Height="40" Margin="0,10,0,0" Name="BlablaText">Bla</TextBlock>
<TextBlock FontSize="18" Height="30" Name="BlablaInfo"/>
<Separator Style="{StaticResource {x:Static ToolBar.SeparatorStyleKey}}" Background="#859fcd" Margin="0,10,0,0" Width="460" />
<StackPanel Name="BlablablIssuer" Height="100" Orientation="Horizontal">
<Image Source="/Images/Blasdsd.png" Width="95" Height="35" />
</StackPanel>
</StackPanel>
</Button>
<Button Name="CashButton" Click="Cash_OnClick" Style="{StaticResource MainButtonBottomRight}" Background="#efefef" Margin="0,10,0,0" HorizontalAlignment="Center" Width="490" Height="200">
<StackPanel Orientation="Vertical" HorizontalAlignment="Left" Width="400" Height="200">
<TextBlock FontSize="28" Height="40" Margin="0,10,0,0" Name="NoteText">Bla</TextBlock>
<TextBlock FontSize="18" Height="30" Name="NoteInfo"><Run Text="Schweizer Franken Banknoten"/></TextBlock>
<Separator Style="{StaticResource {x:Static ToolBar.SeparatorStyleKey}}" Background="#859fcd" Margin="0,10,0,0" Width="460" />
<StackPanel Name="noteIssuer" Height="100" Orientation="Horizontal">
<Image Source="/Images/100frank.jpg" Width="85" Height="55" Margin="0,0,5,0"/>
<Image Source="/Images/50frank.jpg" Width="80" Height="55" Margin="0,0,5,0" />
<Image Source="/Images/20frank.jpg" Width="80" Height="55" Margin="0,0,5,0" />
<Image Source="/Images/10frank.jpg" Width="75" Height="55" Margin="0,0,0,0" />
<Image Source="/Images/qrCode.png" Width="51" Height="45" Margin="0,28" />
</StackPanel>
</StackPanel>
</Button>
</StackPanel>
</StackPanel>
</StackPanel>
Without actually facing the issue I can make only suggestions.
Potential reason could be that window object getting initialized prior to having all buttons enabled in actual Application window.
You could add a wait time prior to initialize window
I am trying to make an image stretch to fit the screen with preserverd aspect ratio. I thought this code would do the trick:
<Image Name="Viewer" Height="{Binding SystemParameters.PrimaryScreenHeight}" Width="{Binding SystemParameters.PrimaryScreenHeight}" Stretch="Uniform" StretchDirection="Both"/>
Regretably it seems like the image just fits to the width of the screen and crops it at the bottom.
The complete xaml code looks like this:
enter co<Window x:Class="ImageExplorer.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:ImageExplorer"
mc:Ignorable="d"
Title="MainWindow" WindowState="Maximized" Background="Black">
<StackPanel>
<Border BorderBrush="Black" BorderThickness="2">
<Grid Margin="0,0,0,0">
<Button Content="open" Click="OpenImage" HorizontalAlignment="Left" VerticalAlignment="Center" Width="58" Height="30" Margin="1,1,1,1" />
<Button Content="Prev." Click="GetPreviousImage" HorizontalAlignment="Left" VerticalAlignment="Center" Width="58" Height="30" Margin="120,1,1,1"/>
<Button Content="Next" Click="GetNextImage" HorizontalAlignment="Left" VerticalAlignment="Center" Width="58" Height="30" Margin="180,1,1,1" />
<Label Content="Fil:" HorizontalAlignment="Right" VerticalAlignment="Center" Width="120" Height="30" Margin="1,1,300,1"/>
<TextBlock Name="StiViser" HorizontalAlignment="Right" VerticalAlignment="Center" Width="298" Margin="1,1,1,1" TextWrapping="Wrap" Text="TextBlock"/>
</Grid>
</Border>
<Image Name="Viewer" Height="{Binding SystemParameters.PrimaryScreenHeight}" Width="{Binding SystemParameters.PrimaryScreenWidth}" Stretch="Uniform" StretchDirection="Both"/>
</StackPanel>
Use DockPanel instead
<DockPanel LastChildFill="True">
<Border DockPanel.Dock="Top" BorderBrush="Black" BorderThickness="2">
<Grid Margin="0,0,0,0">
<Button Content="open" Click="OpenImage" HorizontalAlignment="Left" VerticalAlignment="Center" Width="58" Height="30" Margin="1,1,1,1" />
<Button Content="Prev." Click="GetPreviousImage" HorizontalAlignment="Left" VerticalAlignment="Center" Width="58" Height="30" Margin="120,1,1,1"/>
<Button Content="Next" Click="GetNextImage" HorizontalAlignment="Left" VerticalAlignment="Center" Width="58" Height="30" Margin="180,1,1,1" />
<Label Content="Fil:" HorizontalAlignment="Right" VerticalAlignment="Center" Width="120" Height="30" Margin="1,1,300,1"/>
<TextBlock Name="StiViser" HorizontalAlignment="Right" VerticalAlignment="Center" Width="298" Margin="1,1,1,1" TextWrapping="Wrap" Text="TextBlock"/>
</Grid>
</Border>
<Image Name="Viewer" Height="{Binding SystemParameters.PrimaryScreenHeight}" Width="{Binding SystemParameters.PrimaryScreenWidth}" Stretch="Fill" StretchDirection="Both"/>
</DockPanel>
That white line
I would like to separate it but being issue. How to put stack panel on the Hamburger menu top.F
stackpanel in the HamburgerButtonInfo , each click, the entire HamburgerButtonInfo are selected，How to remove the overall effect selected？
<Page
x:Class="心理FM.Views.Shell"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:Controls="using:Template10.Controls"
xmlns:Core="using:Microsoft.Xaml.Interactions.Core"
xmlns:Interactivity="using:Microsoft.Xaml.Interactivity"
xmlns:behaviors="using:Template10.Behaviors"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="using:心理FM.Views"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:views="using:心理FM.Views"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
mc:Ignorable="d">
<Controls:HamburgerMenu x:Name="MyHamburgerMenu"
>
<Controls:HamburgerMenu.PrimaryButtons>
<!--头像，签到-->
<Controls:HamburgerButtonInfo >
<StackPanel Orientation="Horizontal" Width="400" Height="150">
<StackPanel.Background>
<ImageBrush ImageSource="../Assets/04.jpg"></ImageBrush>
</StackPanel.Background>
<Ellipse Height="70" Width="70" Margin="10,60,0,10">
<Ellipse.Fill>
<ImageBrush ImageSource="../Assets/IMG_0003.JPG" />
</Ellipse.Fill>
</Ellipse>
<StackPanel VerticalAlignment="Center" Margin="10,45,0,0">
<TextBlock Name="UserName" Text="user" FontSize="20" VerticalAlignment="Center"/>
<TextBlock Name="Count" Text="null" FontSize="20" VerticalAlignment="Center"/>
</StackPanel>
<Button Name="SignBtn" Content="签到" HorizontalAlignment="" VerticalAlignment="Bottom"></Button>
</StackPanel>
</Controls:HamburgerButtonInfo>
<Controls:HamburgerButtonInfo ClearHistory="True">
<StackPanel Orientation="Horizontal" VerticalAlignment="Center">
<Image Source="../Assets/"></Image>
<TextBlock Text="我关注的" Margin="12, 0, 0, 0" VerticalAlignment="Center" />
</StackPanel>
</Controls:HamburgerButtonInfo>
<Controls:HamburgerButtonInfo ClearHistory="True">
<StackPanel Orientation="Horizontal" VerticalAlignment="Center">
<Image Source="../Assets/"></Image>
<TextBlock Text="我的下载" Margin="12, 0, 0, 0" VerticalAlignment="Center" />
</StackPanel>
</Controls:HamburgerButtonInfo>
<Controls:HamburgerButtonInfo ClearHistory="True">
<StackPanel Orientation="Horizontal" VerticalAlignment="Center">
<Image Source="../Assets/"></Image>
<TextBlock Text="我的话题" Margin="12, 0, 0, 0" VerticalAlignment="Center" />
</StackPanel>
</Controls:HamburgerButtonInfo>
<Controls:HamburgerButtonInfo ClearHistory="True">
<StackPanel Orientation="Horizontal" VerticalAlignment="Center">
<Image Source="../Assets/"></Image>
<TextBlock Text="定时关闭" Margin="12, 0, 0, 0" VerticalAlignment="Center" />
</StackPanel>
</Controls:HamburgerButtonInfo>
<Controls:HamburgerButtonInfo ClearHistory="True">
<StackPanel Orientation="Horizontal" VerticalAlignment="Center">
<Image Source="../Assets/"></Image>
<TextBlock Text="通知" Margin="12, 0, 0, 0" VerticalAlignment="Center" />
</StackPanel>
</Controls:HamburgerButtonInfo>
<Controls:HamburgerButtonInfo ClearHistory="True">
<StackPanel Orientation="Horizontal" VerticalAlignment="Center">
<Image Source="../Assets/"></Image>
<TextBlock Text="私信" Margin="12, 0, 0, 0" VerticalAlignment="Center" />
</StackPanel>
</Controls:HamburgerButtonInfo>
</Controls:HamburgerMenu.PrimaryButtons>
<Controls:HamburgerMenu.SecondaryButtons>
<!-- profile button -->
<Controls:HamburgerButtonInfo ButtonType="Command">
<Interactivity:Interaction.Behaviors>
<Core:EventTriggerBehavior EventName="Tapped">
<behaviors:MessageDialogAction Title="Show profile" Content="This is an example of a Command-type hamburger button. It does not navigate, only raises the Tapped event for some custom implementation." />
</Core:EventTriggerBehavior>
</Interactivity:Interaction.Behaviors>
<StackPanel Orientation="Horizontal">
<ToolTipService.ToolTip>
<TextBlock MaxWidth="225"
Text="This is the tooltip for the Show Profile command button. Remember to localize."
TextWrapping="Wrap" />
</ToolTipService.ToolTip>
<SymbolIcon Width="48"
Height="48"
Symbol="Contact" />
<TextBlock Margin="12,0,0,0"
VerticalAlignment="Center"
Text="User profile" />
</StackPanel>
</Controls:HamburgerButtonInfo>
<!-- settingspage button -->
<Controls:HamburgerButtonInfo x:Name="SettingsButton"
PageParameter="0"
PageType="views:SettingsPage">
<Controls:HamburgerButtonInfo.NavigationTransitionInfo>
<SuppressNavigationTransitionInfo />
</Controls:HamburgerButtonInfo.NavigationTransitionInfo>
<StackPanel Orientation="Horizontal">
<SymbolIcon Width="48"
Height="48"
Symbol="Setting" />
<TextBlock Margin="12,0,0,0"
VerticalAlignment="Center"
Text="Settings" />
</StackPanel>
</Controls:HamburgerButtonInfo>
</Controls:HamburgerMenu.SecondaryButtons>
</Controls:HamburgerMenu>
</Page>
You can simply set the ButtonType to Literal in your first Controls:HamburgerButtonInfo.
There are three types for HamburgerButton: Command, Toggle and Literal, by default it is "Toggle", you can change this property to see the difference.
In short, in this case, you can modify your code like this:
<Controls:HamburgerButtonInfo ButtonType="Literal">
<StackPanel Orientation="Horizontal" Width="400" Height="150">
<StackPanel.Background>
<ImageBrush ImageSource="../Assets/04.jpg"></ImageBrush>
</StackPanel.Background>
<Ellipse Height="70" Width="70" Margin="10,60,0,10">
<Ellipse.Fill>
<ImageBrush ImageSource="../Assets/IMG_0003.JPG" />
</Ellipse.Fill>
</Ellipse>
<StackPanel VerticalAlignment="Center" Margin="10,45,0,0">
<TextBlock Name="UserName" Text="user" FontSize="20" VerticalAlignment="Center"/>
<TextBlock Name="Count" Text="null" FontSize="20" VerticalAlignment="Center"/>
</StackPanel>
<Button Name="SignBtn" Content="签到" HorizontalAlignment="" VerticalAlignment="Bottom"></Button>
</StackPanel>
</Controls:HamburgerButtonInfo>