UWP arrange Bottom items in vertically(splitview)
I am working in UWP, I have a split view for navigation view.
I want to arrange bottom items to vertically when I closing the pane.
This is the UI I have before closing the pane
I want to arrange items like this
uwp uinavigationbar
edited Nov 23 '18 at 13:40
Martin Zikmund
23.8k63460
asked Nov 23 '18 at 10:54
MathanKumarMathanKumar
157
add a comment |
I am working in UWP, I have a split view for navigation view.
I want to arrange bottom items to vertically when I closing the pane.
This is the UI I have before closing the pane
I want to arrange items like this
uwp uinavigationbar
edited Nov 23 '18 at 13:40
Martin Zikmund
23.8k63460
asked Nov 23 '18 at 10:54
MathanKumarMathanKumar
157
What did you try so far?
– TheTanic
Nov 23 '18 at 11:25
Post the XAML you currently have
– Martin Zikmund
Nov 23 '18 at 11:52
add a comment |
I am working in UWP, I have a split view for navigation view.
I want to arrange bottom items to vertically when I closing the pane.
This is the UI I have before closing the pane
I want to arrange items like this
uwp uinavigationbar
edited Nov 23 '18 at 13:40
Martin Zikmund
23.8k63460
asked Nov 23 '18 at 10:54
MathanKumarMathanKumar
157
I am working in UWP, I have a split view for navigation view.
I want to arrange bottom items to vertically when I closing the pane.
This is the UI I have before closing the pane
I want to arrange items like this
uwp uinavigationbar
uwp uinavigationbar
edited Nov 23 '18 at 13:40
Martin Zikmund
23.8k63460
asked Nov 23 '18 at 10:54
MathanKumarMathanKumar
157
edited Nov 23 '18 at 13:40
Martin Zikmund
23.8k63460
asked Nov 23 '18 at 10:54
MathanKumarMathanKumar
157
edited Nov 23 '18 at 13:40
Martin Zikmund
23.8k63460
edited Nov 23 '18 at 13:40
Martin Zikmund
23.8k63460
edited Nov 23 '18 at 13:40
Martin Zikmund
23.8k63460
23.8k63460
asked Nov 23 '18 at 10:54
MathanKumarMathanKumar
157
asked Nov 23 '18 at 10:54
MathanKumarMathanKumar
157
asked Nov 23 '18 at 10:54
MathanKumarMathanKumar
157
157
What did you try so far?
– TheTanic
Nov 23 '18 at 11:25
Post the XAML you currently have
– Martin Zikmund
Nov 23 '18 at 11:52
add a comment |
What did you try so far?
– TheTanic
Nov 23 '18 at 11:25
Post the XAML you currently have
– Martin Zikmund
Nov 23 '18 at 11:52
What did you try so far?
– TheTanic
Nov 23 '18 at 11:25
What did you try so far?
– TheTanic
Nov 23 '18 at 11:25
Post the XAML you currently have
– Martin Zikmund
Nov 23 '18 at 11:52
Post the XAML you currently have
– Martin Zikmund
Nov 23 '18 at 11:52
add a comment |
1 Answer
1
active
oldest
votes
I would implement it using a Grid with the following layout:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" x:Name="SecondColumn" />
<ColumnDefinition Width="Auto" x:Name="ThirdColumn" />
</Grid.ColumnDefinitions>
...
</Grid>
Now using the PaneClosing and PaneOpening events to just change the Grid.Column and Grid.Row values of the buttons appropriately.
So when pane is open, I would set:
Grid.Rowto 0 for all three buttons
Grid.Columnto 0, 1, 2 respectively
SecondColumn.WidthandThirdColumn.Widthtonew GridLength(1, GridUnitType.Star)
And when closed:
Grid.Rowto 0, 1, 2 respectively
Grid.Columnto 0 for all three buttons
SecondColumn.WidthandThirdColumn.Widthtonew GridLength(0)
Alternative solution would be to use a StackPanel and just switch its Orientation between Horizontal and Vertical, although that would not put the buttons right next to each other - to add the spaces, you would have to modify the Margin of the buttons too.
answered Nov 23 '18 at 11:56
Martin ZikmundMartin Zikmund
23.8k63460
you have any sample for this
– MathanKumar
Nov 23 '18 at 13:29
Well, the answer is basically the sample :-D . There is everything you need to do in the code. What are you missing? Could you also please post the current XAML code you have?
– Martin Zikmund
Nov 23 '18 at 13:32
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53445330%2fuwp-arrange-bottom-items-in-verticallysplitview%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
I would implement it using a Grid with the following layout:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" x:Name="SecondColumn" />
<ColumnDefinition Width="Auto" x:Name="ThirdColumn" />
</Grid.ColumnDefinitions>
...
</Grid>
Now using the PaneClosing and PaneOpening events to just change the Grid.Column and Grid.Row values of the buttons appropriately.
So when pane is open, I would set:
Grid.Rowto 0 for all three buttons
Grid.Columnto 0, 1, 2 respectively
SecondColumn.WidthandThirdColumn.Widthtonew GridLength(1, GridUnitType.Star)
And when closed:
Grid.Rowto 0, 1, 2 respectively
Grid.Columnto 0 for all three buttons
SecondColumn.WidthandThirdColumn.Widthtonew GridLength(0)
Alternative solution would be to use a StackPanel and just switch its Orientation between Horizontal and Vertical, although that would not put the buttons right next to each other - to add the spaces, you would have to modify the Margin of the buttons too.
answered Nov 23 '18 at 11:56
Martin ZikmundMartin Zikmund
23.8k63460
you have any sample for this
– MathanKumar
Nov 23 '18 at 13:29
Well, the answer is basically the sample :-D . There is everything you need to do in the code. What are you missing? Could you also please post the current XAML code you have?
– Martin Zikmund
Nov 23 '18 at 13:32
add a comment |
I would implement it using a Grid with the following layout:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" x:Name="SecondColumn" />
<ColumnDefinition Width="Auto" x:Name="ThirdColumn" />
</Grid.ColumnDefinitions>
...
</Grid>
Now using the PaneClosing and PaneOpening events to just change the Grid.Column and Grid.Row values of the buttons appropriately.
So when pane is open, I would set:
Grid.Rowto 0 for all three buttons
Grid.Columnto 0, 1, 2 respectively
SecondColumn.WidthandThirdColumn.Widthtonew GridLength(1, GridUnitType.Star)
And when closed:
Grid.Rowto 0, 1, 2 respectively
Grid.Columnto 0 for all three buttons
SecondColumn.WidthandThirdColumn.Widthtonew GridLength(0)
Alternative solution would be to use a StackPanel and just switch its Orientation between Horizontal and Vertical, although that would not put the buttons right next to each other - to add the spaces, you would have to modify the Margin of the buttons too.
answered Nov 23 '18 at 11:56
Martin ZikmundMartin Zikmund
23.8k63460
you have any sample for this
– MathanKumar
Nov 23 '18 at 13:29
Well, the answer is basically the sample :-D . There is everything you need to do in the code. What are you missing? Could you also please post the current XAML code you have?
– Martin Zikmund
Nov 23 '18 at 13:32
add a comment |
I would implement it using a Grid with the following layout:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" x:Name="SecondColumn" />
<ColumnDefinition Width="Auto" x:Name="ThirdColumn" />
</Grid.ColumnDefinitions>
...
</Grid>
Now using the PaneClosing and PaneOpening events to just change the Grid.Column and Grid.Row values of the buttons appropriately.
So when pane is open, I would set:
Grid.Rowto 0 for all three buttons
Grid.Columnto 0, 1, 2 respectively
SecondColumn.WidthandThirdColumn.Widthtonew GridLength(1, GridUnitType.Star)
And when closed:
Grid.Rowto 0, 1, 2 respectively
Grid.Columnto 0 for all three buttons
SecondColumn.WidthandThirdColumn.Widthtonew GridLength(0)
Alternative solution would be to use a StackPanel and just switch its Orientation between Horizontal and Vertical, although that would not put the buttons right next to each other - to add the spaces, you would have to modify the Margin of the buttons too.
answered Nov 23 '18 at 11:56
Martin ZikmundMartin Zikmund
23.8k63460
I would implement it using a Grid with the following layout:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" x:Name="SecondColumn" />
<ColumnDefinition Width="Auto" x:Name="ThirdColumn" />
</Grid.ColumnDefinitions>
...
</Grid>
Now using the PaneClosing and PaneOpening events to just change the Grid.Column and Grid.Row values of the buttons appropriately.
So when pane is open, I would set:
Grid.Rowto 0 for all three buttons
Grid.Columnto 0, 1, 2 respectively
SecondColumn.WidthandThirdColumn.Widthtonew GridLength(1, GridUnitType.Star)
And when closed:
Grid.Rowto 0, 1, 2 respectively
Grid.Columnto 0 for all three buttons
SecondColumn.WidthandThirdColumn.Widthtonew GridLength(0)
Alternative solution would be to use a StackPanel and just switch its Orientation between Horizontal and Vertical, although that would not put the buttons right next to each other - to add the spaces, you would have to modify the Margin of the buttons too.
answered Nov 23 '18 at 11:56
Martin ZikmundMartin Zikmund
23.8k63460
edited Nov 23 '18 at 13:25
answered Nov 23 '18 at 11:56
Martin ZikmundMartin Zikmund
23.8k63460
answered Nov 23 '18 at 11:56
Martin ZikmundMartin Zikmund
23.8k63460
answered Nov 23 '18 at 11:56
Martin ZikmundMartin Zikmund
23.8k63460
23.8k63460
you have any sample for this
– MathanKumar
Nov 23 '18 at 13:29
Well, the answer is basically the sample :-D . There is everything you need to do in the code. What are you missing? Could you also please post the current XAML code you have?
– Martin Zikmund
Nov 23 '18 at 13:32
add a comment |
you have any sample for this
– MathanKumar
Nov 23 '18 at 13:29
Well, the answer is basically the sample :-D . There is everything you need to do in the code. What are you missing? Could you also please post the current XAML code you have?
– Martin Zikmund
Nov 23 '18 at 13:32
you have any sample for this
– MathanKumar
Nov 23 '18 at 13:29
you have any sample for this
– MathanKumar
Nov 23 '18 at 13:29
Well, the answer is basically the sample :-D . There is everything you need to do in the code. What are you missing? Could you also please post the current XAML code you have?
– Martin Zikmund
Nov 23 '18 at 13:32
Well, the answer is basically the sample :-D . There is everything you need to do in the code. What are you missing? Could you also please post the current XAML code you have?
– Martin Zikmund
Nov 23 '18 at 13:32
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53445330%2fuwp-arrange-bottom-items-in-verticallysplitview%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
What did you try so far?
– TheTanic
Nov 23 '18 at 11:25
Post the XAML you currently have
– Martin Zikmund
Nov 23 '18 at 11:52