I'm working with an item template that should display one or more buttons per item. There are three buttons that I want to be displayed on a horizontal line. Each button has an icon and some text.
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Button x:Name="LeftButton"
Text="Left Button"
ImageSource="left.png"
HorizontalOptions="Start"/>
<Button x:Name="CenterButton"
Text="Center Button"
ImageSource="center.png"
HorizontalOptions="Center"/>
<Button x:Name="RightButton"
Text="Right Button"
ImageSource="right.png"
HorizontalOptions="End"/>
</Grid>
This is working good so far. The three buttons display the icon and text and they are aligned left, center and right respectively.
Now, I want the buttons to only display the icons, if the container is not wide enough to display all the text. As far as I understand MVVM, this should be the responsibility of the View.
My intended solution would be something like this:
public partial class ItemTemplate : ContentView
// ContentView is our implementation of a UI element.
{
public ItempTemplate()
{
InitializeComponent();
SizeChanged += HandleSizeChanged;
}
private void HandleSizeChanged(object sender, EventArgs e)
{
if (/* not enough space */)
{
LeftButton.Text = string.Empty;
CenterButton.Text = string.Empty;
RightButton.Text = string.Empty;
}
else
{
LeftButton.Text = "Left Button";
CenterButton.Text = "Center Button";
RightButton.Text = "Right Button";
}
}
}
Is there any way to know if the container is wide enough for all three button? If possible, I'd like to use a dynamic solution, because the button text will eventually be translated.
You can place the code into a custom contentview , and decide to hide/show the text in the event LayoutChanged according to the container's width .
Custom View xaml
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Button x:Name="LeftButton" Grid.Column="0" Text="Left Button" ImageSource="dots.png" HorizontalOptions="Start"/>
<Button x:Name="CenterButton" Grid.Column="1" Text="Center Button" ImageSource="dots.png" HorizontalOptions="Center"/>
<Button x:Name="RightButton" Grid.Column="2" Text="Right Button" ImageSource="dots.png" HorizontalOptions="End"/>
</Grid>
Custom View code behind
public partial class MyView : ContentView
{
public MyView()
{
InitializeComponent();
this.LayoutChanged += MyView_LayoutChanged;
}
private void MyView_LayoutChanged(object sender, EventArgs e)
{
var view = sender as View;
if (view.Width < 200)
{
LeftButton.Text = string.Empty;
CenterButton.Text = string.Empty;
RightButton.Text = string.Empty;
}
else
{
LeftButton.Text = "Left Button";
CenterButton.Text = "Center Button";
RightButton.Text = "Right Button";
}
}
}
Scenario : container is large enough.
xmlns:local="clr-namespace:FormsApp"
<local:MyView/>
Scenario : container is small ,wrapped inside another layout .
<Grid HorizontalOptions="Start" WidthRequest="199" >
<local:MyView/>
</Grid>
I solved my problem by using a custom button implementation (mostly because I needed some other additional features).
The custom button contains an Image and a Label. In addition to the standard button features I need, I added these methods to the code-behind:
public void ExpandText() {
Label.IsVisible = true;
}
public void CollapseText() {
Label.IsVisible = false;
}
public bool IsTextCollapsed() {
return !Label.IsVisible;
}
public double GetWidthAsExpanded() {
return Image.Width + Label.Width;
}
In the container's code-behind I check if the button's width fits within its container and collapse/expand accordingly. For that to work, I added containers for each button.
public ItemTemplate() {
InitializeComponent();
LayoutChanged += HandleLayoutChanged;
}
private static void HandleLayoutChanged(object sender, EventArgs e)
{
if (!(sender is ItemTemplate itemTemplate))
{
return;
}
if (itemTemplate.ButtonContainerLeft.Width > itemTemplate.ButtonLeft.GetWidthAsExpanded()
&& itemTemplate.ButtonContainerCenter.Width > itemTemplate.ButtonCenter.GetWidthAsExpanded()
&& itemTemplate.ButtonContainerRight.Width > itemTemplate.ButtonRight.GetWidthAsExpanded())
{
ExpandAllButtons(itemTemplate);
}
else
{
CollapseAllButtons(itemTemplate);
}
}
Because I added ExpandText and CollapseText earlier, I don't have to "remember" what the text inside the button was, because I just collapse the label within the button. GetWidthAsExpanded will always return the necessary width of the button, even if it is collapsed.
side-note 1: I could've just added the width-check within the custom button implementation, but not every ItemTemplate has all buttons and if any label is collapsed, all labels should be collapsed.
side-note 2: I needed button containers either way, because the left button will either be "Mark as Read" or "Mark as Unread" depending on the state of the ItemTemplate data context. So there are actually two buttons in the first container.
Related
Looking forward to your assistance once again :)
I'm trying to have the buttons on the far right be able to delete their row in the tableview control. Right now they now about which row they are on but I cannot connect this information to the parent. The table view is populated with a custom viewcell.
The custom view cell contains two different pickers, two entry fields and a button. I haven't found a cleaner way to execute this as I have the picker's data which isn't related to the # of rows in the data table control.
Currently when you click a button on the right it posts to the console what row was selected but I don't know of a way to connect that to its parent in order to actually delete that row on the data table
View Cell Code Behind
public partial class RecipeIngredientViewCell : ViewCell
{
ObservableCollection<clIngredient> _listIngredients = new ObservableCollection<clIngredient>();
public ObservableCollection<clIngredient> listIngredients { get { return _listIngredients; } }
ObservableCollection<clUnit> _listUnit = new ObservableCollection<clUnit>();
public ObservableCollection<clUnit> funclistUnit { get { return _listUnit; } }
clRecipeIngredient _recipeIngredient;
int _row;
public RecipeIngredientViewCell(clRecipeIngredient passedrecipeIngredient, ObservableCollection<clIngredient> passedlistIngredients, ObservableCollection<clUnit> passedlistUnits, int row)
{
InitializeComponent();
_listIngredients = passedlistIngredients;
_listUnit = passedlistUnits;
_recipeIngredient = passedrecipeIngredient;
_row = row;
this.BindingContext = _recipeIngredient;
//INGREDIENT PICKER
pickerIngredient.ItemsSource = _listIngredients;
for(int x = 0; x < _listIngredients.Count; x++)
{
if (_listIngredients[x].IngredientName == _recipeIngredient.IngredientName)
{
pickerIngredient.SelectedIndex = x;
}
}
//UNIT PICKER
pickerUnit.ItemsSource = _listUnit;
for (int x = 0; x < _listUnit.Count; x++)
{
if (_listUnit[x].UnitName == _recipeIngredient.UnitName)
{
pickerUnit.SelectedIndex = x;
}
}
}
private void btnDeleteRecipeIngredient_Clicked(object sender, EventArgs e)
{
//NOT IMPLEMENTED YET!
Console.WriteLine(_recipeIngredient.IngredientName + " AT ROW " + _row.ToString());
}
private void txtQuantity_TextChanged(object sender, TextChangedEventArgs e)
{
_recipeIngredient.Quantity = txtQuantity.Text.ToDouble();
}
private void txtComment_TextChanged(object sender, TextChangedEventArgs e)
{
_recipeIngredient.Comments = txtComment.Text;
}
private void pickerIngredient_SelectedIndexChanged(object sender, EventArgs e)
{
_recipeIngredient.IngredientName = pickerIngredient.SelectedItem.ToString();
}
private void pickerUnit_SelectedIndexChanged(object sender, EventArgs e)
{
_recipeIngredient.UnitName = pickerIngredient.SelectedItem.ToString();
}
}
View Cell XAML
<ViewCell xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
x:Class="RecipeDatabaseXamarin.Views.RecipeIngredientViewCell">
<Grid VerticalOptions="CenterAndExpand" Padding = "20, 0" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="75" />
</Grid.ColumnDefinitions>
<Picker Grid.Column = "0" x:Name="pickerIngredient" HorizontalOptions = "StartAndExpand" SelectedIndexChanged="pickerIngredient_SelectedIndexChanged"/>
<Entry Grid.Column = "1" x:Name ="txtQuantity" HorizontalOptions = "StartAndExpand" Text = "{Binding Quantity}" TextChanged="txtQuantity_TextChanged" />
<Picker Grid.Column = "2" x:Name ="pickerUnit" HorizontalOptions = "StartAndExpand" SelectedIndexChanged="pickerUnit_SelectedIndexChanged"/>
<Entry Grid.Column = "3" x:Name="txtComment" HorizontalOptions = "StartAndExpand" Text = "{Binding Comments}" TextChanged="txtComment_TextChanged" WidthRequest="150"/>
<Button Grid.Column = "4" x:Name="btnDeleteRecipeIngredient" HorizontalOptions = "StartAndExpand" Text = "Delete Ingredient" Clicked="btnDeleteRecipeIngredient_Clicked"/>
</Grid>
Code Behind for Page
var section = new TableSection();
for(int i = 0;i<_downloadedRecipeIngredients.Count;i++)
{
var cell = new RecipeIngredientViewCell(downloadedRecipeIngredients[i], listIngredients, listUnit, i);
section.Add(cell);
}
tblData.Root.Add(section);
In the main page code behind I want the button to run a block of code to execute something such as
tblData.Root.del(ROW_INDEX);
Thanks!
I believe I have this solved. Will post the solution when I get back from the 4th weekend.
The solution to this problem is answered on another post. Basically the solution is easier once MVVM is implemented even though it was a pain to get it to work on the picker withing the listView control.
This other thread has sample code which you can run.
Trying to set picker within listview MVVM Xamarin
If anyone runs into the same issue please post and I'll try to respond back as this issue was a PAIN!!!!
I am not a notorious xamarin programmer, but you have your width to auto, which most likely changes the whole grid the moment the width changes. Therefore it will align the buttons differently too.
It seems you could position the horizontalOptions to "End" to at least put the buttons to the end of the screen. If you want to have it always the same, I would give them a certain width per section.
First of all I am new to UWP and I have already searched almost everywhere (using Google and Stackoverflow) for the answer but couldn't find the answer for my problem.
So, Here is the problem:
I planned to create a pixel paint app that has tab function like Edge (utilizing title bar) for UWP using Visual Studio 2017 and Target Sdk: Creators Update.
I wanted to move the custom title bar I made to the content view when the app in fullscreen condition.
I wanted to move from here (windows title bar, this is just the button XAML code, I'm not including the tab bar XAML code because it's a commercial project):
<Grid x:Name="btnMenuPlace1" Grid.Column="0">
<Grid x:Name="btnMenuPlaceContent" Background="{StaticResource SystemControlHighlightListAccentMediumBrush}">
<Button x:Name="btnMenu" FontFamily="Segoe MDL2 Assets" Content=""
Width="50" Height="50" Background="Transparent" Click="btnMenu_Click"/>
</Grid>
</Grid>
To here (user view):
<Grid x:Name="btnMenuPlace2" Grid.Column="0">
</Grid>
Both parent of those Grid is an another Grid using Grid.ColumnDefinitions like this:
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
And here's my C# Code:
private void WindowSizeChanged(object sender, WindowSizeChangedEventArgs e)
{
var appView = ApplicationView.GetForCurrentView();
if (appView.IsFullScreenMode)
{
Utility.RemoveChild(btnMenuPlaceContent);
btnMenuPlace2.Children.Add(btnMenuPlaceContent);
Utility.RemoveChild(tabBarPlaceContent);
tabBarPlace2.Children.Add(tabBarPlaceContent);
}
else
{
Utility.RemoveChild(btnMenuPlaceContent);
btnMenuPlace1.Children.Add(btnMenuPlaceContent);
Utility.RemoveChild(tabBarPlaceContent);
tabBarPlace1.Children.Add(tabBarPlaceContent);
}
e.Handled = true;
}
And here is my Utility RemoveChild Code:
public static void RemoveChild(DependencyObject parent, UIElement child)
{
var parentAsPanel = VisualTreeHelper.GetParent(child);
if (parentAsPanel != null)
{
parentAsPanel.Children.Remove(child);
return;
}
var parentAsContentPresenter = parent as ContentPresenter;
if (parentAsContentPresenter != null)
{
if (parentAsContentPresenter.Content == child)
{
parentAsContentPresenter.Content = null;
}
return;
}
var parentAsContentControl = parent as ContentControl;
if (parentAsContentControl != null)
{
if (parentAsContentControl.Content == child)
{
parentAsContentControl.Content = null;
}
return;
}
}
This is my app looks like before entered the fullscreen mode:
So the problem is whenever the app entered the fullscreen mode, the child does move to the new parent, but the button is not there only the background color of the grid remaining and I can't click any of them (not a single click event work), take a look:
And when I switched back to not fullscreen view the proggressbar loading on the new tab not shown.
I don't know which one I did was wrong XAML or the C# code.
Any help would be appreciated.
P.S. I'm Indonesian, so maybe there is something wrong with my sentence, hopefully You are understand what I'm talking about.
There are somethings wrong with your code snippet. For example, RemoveChild method has two parameters but you only provide one when you invoking it. And without assign the parentAsPanel variable type, you cannot get the Children property.
Since the code is not completed, after code updated and add some other code needed I can run your code snippet correctly and cannot reproduce the issue above. Here is my completed testing code:
XAML
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<StackPanel>
<Grid x:Name="btnMenuPlace1" Grid.Column="0" Grid.Row="0">
<Grid x:Name="btnMenuPlaceContent" Background="{StaticResource SystemControlHighlightListAccentMediumBrush}">
<StackPanel Orientation="Horizontal">
<Button x:Name="btnMenu" FontFamily="Segoe MDL2 Assets" Content="" Width="50" Height="50" Background="Transparent" />
<!--<local:CustomTitleBar Width="200" Height="50"></local:CustomTitleBar>-->
</StackPanel>
</Grid>
</Grid>
<Grid x:Name="btnMenuPlace2" Grid.Column="1" Grid.Row="1"/>
<TextBlock Text="text" x:Name="txtresult"></TextBlock>
<Button x:Name="ToggleFullScreenModeButton" Margin="0,10,0,0" Click="ToggleFullScreenModeButton_Click">
<SymbolIcon x:Name="ToggleFullScreenModeSymbol" Symbol="FullScreen" />
</Button>
</StackPanel>
</Grid>
Code behind
public sealed partial class MainPage : Page
{
public MainPage()
{
this.InitializeComponent();
CoreApplication.GetCurrentView().TitleBar.ExtendViewIntoTitleBar = true;
Window.Current.SetTitleBar(btnMenuPlace1);
Window.Current.SizeChanged += Current_SizeChanged;
}
private void Current_SizeChanged(object sender, Windows.UI.Core.WindowSizeChangedEventArgs e)
{
var appView = ApplicationView.GetForCurrentView();
if (appView.IsFullScreenMode)
{
RemoveChild(btnMenuPlace1, btnMenuPlaceContent);
btnMenuPlace2.Children.Add(btnMenuPlaceContent);
}
else
{
RemoveChild(btnMenuPlace2, btnMenuPlaceContent);
btnMenuPlace1.Children.Add(btnMenuPlaceContent);
}
e.Handled = true;
}
public void RemoveChild(DependencyObject parent, UIElement child)
{
Grid parentAsPanel = VisualTreeHelper.GetParent(child) as Grid;
if (parentAsPanel != null)
{
parentAsPanel.Children.Remove(child);
return;
}
var parentAsContentPresenter = parent as ContentPresenter;
if (parentAsContentPresenter != null)
{
if (parentAsContentPresenter.Content == child)
{
parentAsContentPresenter.Content = null;
}
return;
}
var parentAsContentControl = parent as ContentControl;
if (parentAsContentControl != null)
{
if (parentAsContentControl.Content == child)
{
parentAsContentControl.Content = null;
}
return;
}
}
private void ToggleFullScreenModeButton_Click(object sender, RoutedEventArgs e)
{
var view = ApplicationView.GetForCurrentView();
if (view.IsFullScreenMode)
{
view.ExitFullScreenMode();
}
else
{
if (view.TryEnterFullScreenMode())
{
txtresult.Text = "full screen";
}
else
{
txtresult.Text = "no full screen";
}
}
}
}
My testing environment is OS build 15063. If you still have issues please provide the minimal reproduced project. You may just try to reproduce the issue on my testing demo. More details please reference the official sample.
Sorry it was My mistake, that above code I post is actually working (just some of the code wrongly copied, like for example the parameter on the utility code is not necessary).
The false is on it's parent, i forgot to add row definition on the second place (btnPlace2) parent.
Now it works and looks great now :)
Here is some picture of em:
On FullScreen Mode:
Thanks to anyone answering and voting this question up.
Best regards,
andr33ww
I am new in coding and atm trying to understand events what is an annoying stage but super important I guess. I just made a tic tac toe game and it is working but not really "beautiful" coded. I really have problems in using the events. well I am reading 3 different books, google is my best friend and I guess I red all the StackOverflow posts about events but the bulb in my head is never shining :P so I will give you boys a part of my code and I added some comments for the understanding:
/*I have 9 buttons(3x3) which are the play field */
private void Feld1_Click(object sender, RoutedEventArgs e)
{
// in my game each player have 1 Radiobutton so they check a RButton and then it's their turn
if (Player1RButton.IsChecked == true)
{
// i dont wanted to use "X" or "O" so i chose the colors green and yellow
Feld1.Background = Brushes.Green;
// Feld1G is for example that Player1 (green) is "owning" this
// field/button so i can later check who won the game
Feld1G = 1;
Feld1Y = 0;
}
if (Player2RButton.IsChecked == true)
{
//here is the same thing happening like in the example of green
Feld1.Background = Brushes.Yellow;
Feld1Y = 1;
Feld1G = 0;
}
}
private void Feld2_Click(object sender, RoutedEventArgs e)
{
if (Player1RButton.IsChecked == true)
{
Feld2.Background = Brushes.Green;
Feld2G = 1;
Feld2Y = 0;
}
if (Player2RButton.IsChecked == true)
{
Feld2.Background = Brushes.Yellow;
Feld2Y = 1;
Feld2G = 0;
}
}
here is an example how the ui looks like:tic tac toe exampe
now what I would like to do in my words cause I don't know how to code it:
// I have no idea if this is the right start
public void OnClick (EventArgs e)
{
/* now I guess here have to happen something like this, for example, field9 was clicked and radiobutton2 is checked: know that button9 have been clicked know radiobutton is checked and now brush (this.button?) button/field9 and set Feld9Y=1;
}
*/
I want to make it a bit more clearly here: I want all the functions run from the method above and not in each button event for itself
so my questions:
1. what do I have to do to make this work the way i explained above to make 1 method for all of my buttons
and it would be great if you boys could make a good story why I have to use it this way and how it works so a brainless ape like me can understand the event stuff and the bulb will finally shine bright like a diamond :P
Edit:here is the link for my whole code:
https://codereview.stackexchange.com/questions/164462/c-events-in-a-tic-tac-toe-game
Here is a quick example to get you started. I only implemented changing the background and nothing more.
Below is the xaml. I set up a very simple board with 9 regular buttons and 2 radio buttons. I did not implement anything else.
<Grid x:Name="board">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Button Content="Button"/>
<Button Content="Button"
Grid.Column="1" />
<Button Content="Button"
Grid.Column="2"/>
<Button Content="Button"
Grid.Row="1" />
<Button Content="Button"
Grid.Row="1"
Grid.Column="1" />
<Button Content="Button"
Grid.Row="1"
Grid.Column="2" />
<Button Content="Button"
Grid.Row="2" />
<Button Content="Button"
Grid.Row="2"
Grid.Column="1" />
<Button Content="Button"
Grid.Row="2"
Grid.Column="2" />
<RadioButton x:Name="playerOneRadioButton"
IsChecked="True"
Content="Player 1"
Grid.Column="3"
HorizontalAlignment="Left"
Margin="10,10,0,0"
Grid.Row="1"
VerticalAlignment="Top" />
<RadioButton x:Name="playerTwoRadioButton"
Content="Player 2"
Grid.Column="3"
HorizontalAlignment="Left"
Margin="10,30,0,0"
Grid.Row="1"
VerticalAlignment="Top" />
</Grid>
Below is the code behind.
I hooked up each buttons click event to point to the Button_Click method.
In that method I first cast the sender to type Button. I then change the background color of the button to either yellow or green.
public partial class MainWindow: Window
{
public MainWindow( )
{
InitializeComponent( );
// Iterate through all of the child elements
// contained in the Grid control which I named "board".
foreach( var control in board.Children.OfType<Button>( ) )
{
// Hook up the event handler of each button.
control.Click += Button_Click;
}
}
private void Button_Click( object sender, RoutedEventArgs e )
{
// Safe cast the sender to type Button.
var button = sender as Button;
if( button == null ) return;
// Change the background color of the button
// yellow or green based on which radio button
// is checked.
button.Background = playerOneRadioButton.IsChecked.Value ? Brushes.Green : Brushes.Yellow;
}
}
EDIT:
Question 1: The Grid which I have on the design surface is named "board". Children is a property of the Grid control. All child elements (elements that reside inside of the grid, like the buttons) are added to the Children property of the grid control. The Children property is a collection, or you could say a list, of all child elements that reside in the grid control. I loop through each child control in the grid that is of type button.
Question 2: The ?: is called a ternary operator. It is used for writing a conditional statement (an if statement). You can also write it as follows:
if( playerOneRadioButton.IsChecked.Value )
{
button.Background = Brushes.Green;
}
else
{
button.Background = Brushes.Yellow;
}
Question 3: I'm currently casting the object sender to type button using whats called a "safe cast". In other words, if the cast fails (say sender wasn't a button and was some other control instead) then null is returned. I check for this null condition to ensure that the cast was successful. If the button variable is null then the cast was not successful and I want to exit (return) out of that method. No code below the
if(button == null) return;
will execute.
The single method you want to use should look like this:
private void Feld_Click(object sender, RoutedEventArgs e)
{
var currentButton = (Button)sender;
if (Player1RButton.IsChecked == true)
{
currentButton.Background = Brushes.Green;
}
}
Add this as OnClick handler for all the buttons.
From there you can calculate the Feld color whenever you need it, by accessing the Background property in a separate method.
I'd like to display a content dialog box that has more than the traditional Primary and Secondary results. Since I can't override the ContentDialogResult enum and add options to that property, it seems my only choice may be to create my own custom control that works similarly to a ContentDialog.
For additional context: Often, one might see a Dialog box show up during a computer/app operation, when the action is redundant, i.e. copying files to a folder, the computer generally offers a dialog box with not 2 options, but 4. -> "Yes to All", "No to All", "Yes", "No". I can't seem to find any cookie cutter ways to take advantage of this seemingly common practice.
I'd like to use it just the same as a normal Content Dialog like so:
var dialog = new MyCustomContentDialog();
var result = dialog.ShowAsync();
and then return an enum just as the normal ContentDialog but instead have it return 1 of 4 options, not just 2.
Any help or recommendations would be great. Thanks.
I'd like to display a content dialog box that has more than the traditional Primary and Secondary results.
The ContentDialog has 2 built-in buttons(the primary/secondary button) that let a user respond to the dialog. If you want more buttons to let the user to respond to the dialog, you should be able to achieve this by including these buttons in the content of the dialog.
Following is a simple sample shows how to create and use a custom dialog with 3 button:
MyCustomContentDialog.xaml
<ContentDialog
x:Class="ContentDialogDemo01.MyCustomContentDialog"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:ContentDialogDemo01"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
x:Name="dialog"
Title="Delete">
<!-- Content body -->
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" Margin="0,20">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition Height="200" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<TextBlock Grid.ColumnSpan="3" Text="Delete file A?" Margin="5" />
<Button Grid.Row="1" Content="Yes" x:Name="btn1" Click="btn1_Click" Margin="5,0" Width="100" />
<Button Grid.Row="1" Grid.Column="1" Content="No" x:Name="btn2" Click="btn2_Click" Margin="5,0" Width="100" />
<Button Grid.Row="1" Grid.Column="2" Content="Cancle" x:Name="btn3" Click="btn3_Click" Margin="5,0" Width="100" />
</Grid>
</ContentDialog>
MyCustomContentDialog.xaml.cs
namespace ContentDialogDemo01
{
// Define your own ContentDialogResult enum
public enum MyResult
{
Yes,
No,
Cancle,
Nothing
}
public sealed partial class MyCustomContentDialog : ContentDialog
{
public MyResult Result { get; set; }
public MyCustomContentDialog()
{
this.InitializeComponent();
this.Result = MyResult.Nothing;
}
// Handle the button clicks from dialog
private void btn1_Click(object sender, RoutedEventArgs e)
{
this.Result = MyResult.Yes;
// Close the dialog
dialog.Hide();
}
private void btn2_Click(object sender, RoutedEventArgs e)
{
this.Result = MyResult.No;
// Close the dialog
dialog.Hide();
}
private void btn3_Click(object sender, RoutedEventArgs e)
{
this.Result = MyResult.Cancle;
// Close the dialog
dialog.Hide();
}
}
}
Here is the code to show the custom dialog and use returned custom result:
private async void ShowDialog_Click(object sender, RoutedEventArgs e)
{
// Show the custom dialog
MyCustomContentDialog dialog = new MyCustomContentDialog();
await dialog.ShowAsync();
// Use the returned custom result
if (dialog.Result == MyResult.Yes)
{
DialogResult.Text = "Dialog result Yes.";
}
else if (dialog.Result == MyResult.Cancle)
{
DialogResult.Text = "Dialog result Canceled.";
}
else if (dialog.Result == MyResult.No)
{
DialogResult.Text = "Dialog result NO.";
}
}
Here is the entire sample. Following is the output:
Just for completeness - the ContentDialog class by default actually offers three buttons - Primary, Secondary and Close. Close is what is triggered when the user presses escape, but if you set CloseButtonText the button will show up as the third button in the dialog's footer.
Like in Windows Forms we can add multiple panels in the same Form and based on some condition show and hide particular panel. Is there any control in Xamarin.Forms which can be used like this?
The main reason behind this is, I have 3 tabs on a page. I am using buttons for tabs and not tabbed pages as design of tabbed bar is not what my client wants. So I have 3 pages say Page A, Page B, Page C and each of the page has 3 tabs to go to respective page. If user is on Page A and fills some sort of data(which is not yet saved) and wants to go to Page B and then on Page B he fills in some more details and then without saving data on Page B when he comes back to Page A all the details filled by user on Page A and Page B has to be available.
Hence If I use multiple pages for this then the data will be lost when I redirect to new page. So Is there any way by which I have multiple panels and hide 1st panel when 2nd panel is visible which will not clear any data and hence I can achieve what I want.
You can just hide the panels that aren't being used (using the IsVisible property) - this pulls them out of the visual tree but does not release them from memory.
If you create a Content View for each page, then you can easily use them in your main UI such as in this example. Even though we are hiding the individual panels they will still remain in memory while hidden:
MyView.cs (this could be anything you want in your panels):
using System;
using Xamarin.Forms;
namespace FormsSandbox
{
public class MyView : ContentView
{
public static BindableProperty TextProperty = BindableProperty.Create("Text", typeof(string), typeof(MyView),
String.Empty, BindingMode.Default, null, TextChanged);
public string Text {
get {
return (string)GetValue (TextProperty);
}
set {
SetValue (TextProperty, value);
}
}
private Label _contentLabel;
public MyView ()
{
_contentLabel = new Label {
FontSize = 56,
FontAttributes = FontAttributes.Bold,
HorizontalTextAlignment = TextAlignment.Center,
VerticalTextAlignment = TextAlignment.Center
};
Content = _contentLabel;
}
static void TextChanged (BindableObject bindable, object oldValue, object newValue)
{
var view = (MyView)bindable;
view._contentLabel.Text = (newValue ?? "").ToString ();
}
}
}
XamlPage.xaml (main UI page):
<?xml version="1.0" encoding="UTF-8"?>
<ContentPage
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:sandbox="clr-namespace:FormsSandbox"
x:Class="FormsSandbox.XamlPage">
<ContentPage.Padding>
<OnPlatform x:TypeArguments="Thickness" iOS="0,20,0,0" Android="0" WinPhone="0"/>
</ContentPage.Padding>
<Grid RowSpacing="0" ColumnSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Button Text="1" Clicked="ButtonClicked" x:Name="Button1" Grid.Column="0" />
<Button Text="2" Clicked="ButtonClicked" x:Name="Button2" Grid.Column="1" />
<Button Text="3" Clicked="ButtonClicked" x:Name="Button3" Grid.Column="2" />
<sandbox:MyView Text="1" x:Name="View1" Grid.Row="1" Grid.ColumnSpan="3" />
<sandbox:MyView Text="2" x:Name="View2" Grid.Row="1" Grid.ColumnSpan="3" />
<sandbox:MyView Text="3" x:Name="View3" Grid.Row="1" Grid.ColumnSpan="3" />
</Grid>
</ContentPage>
XamlPage.xaml.cs:
using System;
using Xamarin.Forms;
namespace FormsSandbox
{
public partial class XamlPage : ContentPage
{
public XamlPage ()
{
InitializeComponent ();
SelectButton (Button1);
}
void SelectButton(Button button)
{
View view = null;
if (button == Button1)
view = View1;
if (button == Button2)
view = View2;
if (button == Button3)
view = View3;
View1.IsVisible = View1 == view;
View2.IsVisible = View2 == view;
View3.IsVisible = View3 == view;
Button1.TextColor = (Button1 == button) ? Color.Accent.AddLuminosity(0.18) : (Color)Button.TextColorProperty.DefaultValue;
Button2.TextColor = (Button2 == button) ? Color.Accent.AddLuminosity(0.18) : (Color)Button.TextColorProperty.DefaultValue;
Button3.TextColor = (Button3 == button) ? Color.Accent.AddLuminosity(0.18) : (Color)Button.TextColorProperty.DefaultValue;
Button1.BackgroundColor = (Button1 == button) ? Color.Silver.AddLuminosity(0.18) : Color.Silver.AddLuminosity(0.1);
Button2.BackgroundColor = (Button2 == button) ? Color.Silver.AddLuminosity(0.18) : Color.Silver.AddLuminosity(0.1);
Button3.BackgroundColor = (Button3 == button) ? Color.Silver.AddLuminosity(0.18) : Color.Silver.AddLuminosity(0.1);
}
void ButtonClicked (object sender, EventArgs e)
{
SelectButton ((Button)sender);
}
}
}
You can save this data to a cache and load it from there.
public static class MyDataCache
{
public static MyData MyData { get; } = new MyData();
}
// in your pages
protected override void OnAppearing()
{
base.OnAppearing();
// set data from MyDataCache.MyData
MyProperty = MyDataCache.MyData.MyProperty;
}
protected override void OnDisappearing()
{
base.OnDisappearing();
// set data to MyDataCache.MyData
MyDataCache.MyData.MyProperty = MyProperty;
}
But be aware: It's just a memory cache. If the App gets tombstoned, the data will be lost. You can try this approach first and see if its fits your need. After that, you should store the data in a temporary storage (e.g. with Akavache). You should not rebuild this page navigation behavior with something custom.
Just use a Frame:
<StackLayout>
<Frame x:Name="MyPanelABC">
<Label Text="My Stuff" />
</Frame>
</StackLayout>
private void setupPanelABC(bool isVisiblePanelABC){
MyPanelABC.IsVisible = isVisiblePanelABC;
}