How can I make two labels inside two grids appear far left and far right?
I have this XAML:
<Grid BackgroundColor="Red">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto" />
<ColumnDefinition Width="auto" />
</Grid.ColumnDefinitions>
<Grid Grid.Column="0" HorizontalOptions="Start">
<Label Text="X" />
</Grid>
<Grid Grid.Column="1" HorizontalOptions="EndAndExpand">
<Label Text="Y" HorizontalOptions="End" />
</Grid>
</Grid>
I wanted to see something like this with a red background from one side to another:
X Y
However what happens is this with a red background from one side to another:
X Y
Can someone give me advice on how I can achieve the effect I want and what might be going wrong? Note that the Label Text that's currently "Y" could actually be much longer and more than half of the width of the screen. Here I just used one character to simplify the question.
xamarin xamarin.forms
asked Dec 31 '18 at 10:53
Alan2Alan2
1,57656134258
add a comment |
I have this XAML:
<Grid BackgroundColor="Red">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto" />
<ColumnDefinition Width="auto" />
</Grid.ColumnDefinitions>
<Grid Grid.Column="0" HorizontalOptions="Start">
<Label Text="X" />
</Grid>
<Grid Grid.Column="1" HorizontalOptions="EndAndExpand">
<Label Text="Y" HorizontalOptions="End" />
</Grid>
</Grid>
I wanted to see something like this with a red background from one side to another:
X Y
However what happens is this with a red background from one side to another:
X Y
Can someone give me advice on how I can achieve the effect I want and what might be going wrong? Note that the Label Text that's currently "Y" could actually be much longer and more than half of the width of the screen. Here I just used one character to simplify the question.
xamarin xamarin.forms
asked Dec 31 '18 at 10:53
Alan2Alan2
1,57656134258
add a comment |
I have this XAML:
<Grid BackgroundColor="Red">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto" />
<ColumnDefinition Width="auto" />
</Grid.ColumnDefinitions>
<Grid Grid.Column="0" HorizontalOptions="Start">
<Label Text="X" />
</Grid>
<Grid Grid.Column="1" HorizontalOptions="EndAndExpand">
<Label Text="Y" HorizontalOptions="End" />
</Grid>
</Grid>
I wanted to see something like this with a red background from one side to another:
X Y
However what happens is this with a red background from one side to another:
X Y
Can someone give me advice on how I can achieve the effect I want and what might be going wrong? Note that the Label Text that's currently "Y" could actually be much longer and more than half of the width of the screen. Here I just used one character to simplify the question.
xamarin xamarin.forms
asked Dec 31 '18 at 10:53
Alan2Alan2
1,57656134258
I have this XAML:
<Grid BackgroundColor="Red">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto" />
<ColumnDefinition Width="auto" />
</Grid.ColumnDefinitions>
<Grid Grid.Column="0" HorizontalOptions="Start">
<Label Text="X" />
</Grid>
<Grid Grid.Column="1" HorizontalOptions="EndAndExpand">
<Label Text="Y" HorizontalOptions="End" />
</Grid>
</Grid>
I wanted to see something like this with a red background from one side to another:
X Y
However what happens is this with a red background from one side to another:
X Y
Can someone give me advice on how I can achieve the effect I want and what might be going wrong? Note that the Label Text that's currently "Y" could actually be much longer and more than half of the width of the screen. Here I just used one character to simplify the question.
xamarin xamarin.forms
xamarin xamarin.forms
asked Dec 31 '18 at 10:53
Alan2Alan2
1,57656134258
asked Dec 31 '18 at 10:53
Alan2Alan2
1,57656134258
edited Dec 31 '18 at 11:02
Alan2
asked Dec 31 '18 at 10:53
Alan2Alan2
1,57656134258
asked Dec 31 '18 at 10:53
Alan2Alan2
1,57656134258
asked Dec 31 '18 at 10:53
Alan2Alan2
1,57656134258
1,57656134258
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
Set your main Grid to HorizontalOptions="FillAndExpand" and your columns to take up the full width with *.
Now, you don't need the extra wrapping Grids. You could use them, but it will complicate things. Then set the Labels to HorizontalOptions="Start" and End respectively.
<Grid BackgroundColor="Red" VerticalOptions="Center" HorizontalOptions="FillAndExpand">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Label Grid.Column="0" Text="X" HorizontalOptions="Start"/>
<Label Grid.Column="1" Text="Y" HorizontalOptions="End" />
</Grid>
Resulting in:
answered Dec 31 '18 at 11:05
Gerald VersluisGerald Versluis
16.9k43457
Hi Gerald, This works but that means the ration of space allocated for the X and the Y will be 1:1 ? in the app there is a lot more text and things on the 2nd column then it's a problem. For example I tried this: <Label Text="xhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh" HorizontalOptions="End" /> for the second column and the text is limited to just 50% of the width.
– Alan2
Dec 31 '18 at 11:09
I'm sorry, I don't understand what you mean
– Gerald Versluis
Dec 31 '18 at 11:12
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%2f53986599%2fhow-can-i-make-two-labels-inside-two-grids-appear-far-left-and-far-right%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
Set your main Grid to HorizontalOptions="FillAndExpand" and your columns to take up the full width with *.
Now, you don't need the extra wrapping Grids. You could use them, but it will complicate things. Then set the Labels to HorizontalOptions="Start" and End respectively.
<Grid BackgroundColor="Red" VerticalOptions="Center" HorizontalOptions="FillAndExpand">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Label Grid.Column="0" Text="X" HorizontalOptions="Start"/>
<Label Grid.Column="1" Text="Y" HorizontalOptions="End" />
</Grid>
Resulting in:
answered Dec 31 '18 at 11:05
Gerald VersluisGerald Versluis
16.9k43457
Hi Gerald, This works but that means the ration of space allocated for the X and the Y will be 1:1 ? in the app there is a lot more text and things on the 2nd column then it's a problem. For example I tried this: <Label Text="xhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh" HorizontalOptions="End" /> for the second column and the text is limited to just 50% of the width.
– Alan2
Dec 31 '18 at 11:09
I'm sorry, I don't understand what you mean
– Gerald Versluis
Dec 31 '18 at 11:12
add a comment |
Set your main Grid to HorizontalOptions="FillAndExpand" and your columns to take up the full width with *.
Now, you don't need the extra wrapping Grids. You could use them, but it will complicate things. Then set the Labels to HorizontalOptions="Start" and End respectively.
<Grid BackgroundColor="Red" VerticalOptions="Center" HorizontalOptions="FillAndExpand">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Label Grid.Column="0" Text="X" HorizontalOptions="Start"/>
<Label Grid.Column="1" Text="Y" HorizontalOptions="End" />
</Grid>
Resulting in:
answered Dec 31 '18 at 11:05
Gerald VersluisGerald Versluis
16.9k43457
Hi Gerald, This works but that means the ration of space allocated for the X and the Y will be 1:1 ? in the app there is a lot more text and things on the 2nd column then it's a problem. For example I tried this: <Label Text="xhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh" HorizontalOptions="End" /> for the second column and the text is limited to just 50% of the width.
– Alan2
Dec 31 '18 at 11:09
I'm sorry, I don't understand what you mean
– Gerald Versluis
Dec 31 '18 at 11:12
add a comment |
Set your main Grid to HorizontalOptions="FillAndExpand" and your columns to take up the full width with *.
Now, you don't need the extra wrapping Grids. You could use them, but it will complicate things. Then set the Labels to HorizontalOptions="Start" and End respectively.
<Grid BackgroundColor="Red" VerticalOptions="Center" HorizontalOptions="FillAndExpand">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Label Grid.Column="0" Text="X" HorizontalOptions="Start"/>
<Label Grid.Column="1" Text="Y" HorizontalOptions="End" />
</Grid>
Resulting in:
answered Dec 31 '18 at 11:05
Gerald VersluisGerald Versluis
16.9k43457
Set your main Grid to HorizontalOptions="FillAndExpand" and your columns to take up the full width with *.
Now, you don't need the extra wrapping Grids. You could use them, but it will complicate things. Then set the Labels to HorizontalOptions="Start" and End respectively.
<Grid BackgroundColor="Red" VerticalOptions="Center" HorizontalOptions="FillAndExpand">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Label Grid.Column="0" Text="X" HorizontalOptions="Start"/>
<Label Grid.Column="1" Text="Y" HorizontalOptions="End" />
</Grid>
Resulting in:
answered Dec 31 '18 at 11:05
Gerald VersluisGerald Versluis
16.9k43457
answered Dec 31 '18 at 11:05
Gerald VersluisGerald Versluis
16.9k43457
answered Dec 31 '18 at 11:05
Gerald VersluisGerald Versluis
16.9k43457
answered Dec 31 '18 at 11:05
Gerald VersluisGerald Versluis
16.9k43457
16.9k43457
Hi Gerald, This works but that means the ration of space allocated for the X and the Y will be 1:1 ? in the app there is a lot more text and things on the 2nd column then it's a problem. For example I tried this: <Label Text="xhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh" HorizontalOptions="End" /> for the second column and the text is limited to just 50% of the width.
– Alan2
Dec 31 '18 at 11:09
I'm sorry, I don't understand what you mean
– Gerald Versluis
Dec 31 '18 at 11:12
add a comment |
Hi Gerald, This works but that means the ration of space allocated for the X and the Y will be 1:1 ? in the app there is a lot more text and things on the 2nd column then it's a problem. For example I tried this: <Label Text="xhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh" HorizontalOptions="End" /> for the second column and the text is limited to just 50% of the width.
– Alan2
Dec 31 '18 at 11:09
I'm sorry, I don't understand what you mean
– Gerald Versluis
Dec 31 '18 at 11:12
Hi Gerald, This works but that means the ration of space allocated for the X and the Y will be 1:1 ? in the app there is a lot more text and things on the 2nd column then it's a problem. For example I tried this: <Label Text="xhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh" HorizontalOptions="End" /> for the second column and the text is limited to just 50% of the width.
– Alan2
Dec 31 '18 at 11:09
Hi Gerald, This works but that means the ration of space allocated for the X and the Y will be 1:1 ? in the app there is a lot more text and things on the 2nd column then it's a problem. For example I tried this: <Label Text="xhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh" HorizontalOptions="End" /> for the second column and the text is limited to just 50% of the width.
– Alan2
Dec 31 '18 at 11:09
I'm sorry, I don't understand what you mean
– Gerald Versluis
Dec 31 '18 at 11:12
I'm sorry, I don't understand what you mean
– Gerald Versluis
Dec 31 '18 at 11:12
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%2f53986599%2fhow-can-i-make-two-labels-inside-two-grids-appear-far-left-and-far-right%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
