我一直在研究切換按鈕可重用控制元件，它有 3 種狀態。但是我面臨一些問題。我不知道如何繼續前進并將所有這些聯系在一起。目前看起來我的代碼沒有附加到 XAML，因為單擊按鈕后什么也沒有發生？是否有任何好的類似示例可用，或者有人可以提供一些提示什么是錯的？另外我不知道如何將其擴展到 3 個狀態...基本上我需要三個具有自己顏色的狀態，如下所示：
MyCustomToggleButton.xaml：
<ContentView xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="Dash.Controls.MyCustomToggleButton">
<Button>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup Name="ToggleStates">
<VisualState Name="Unactive">
<VisualState.Setters>
<Setter Property="Text" Value="D" />
<Setter Property="FontSize" Value="14" />
<Setter Property="BackgroundColor" Value="#474747" />
<Setter Property="TextColor" Value="White" />
</VisualState.Setters>
</VisualState>
<VisualState Name="Active">
<VisualState.Setters>
<Setter Property="Text" Value="D" />
<Setter Property="FontSize" Value="14" />
<Setter Property="BackgroundColor" Value="#20962d" />
<Setter Property="TextColor" Value="White" />
</VisualState.Setters>
</VisualState>
<VisualState Name="Locked">
<VisualState.Setters>
<Setter Property="Text" Value="D" />
<Setter Property="FontSize" Value="14" />
<Setter Property="BackgroundColor" Value="#FF0000" />
<Setter Property="TextColor" Value="White" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Button>
</ContentView>
MyCustomToggleButton.xaml.cs：
[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class MyCustomToggleButton : ContentView
{
public event EventHandler<ToggledEventArgs> Toggled;
public MyCustomToggleButton()
{
this.InitializeComponent();
}
public static BindableProperty IsToggledProperty =
BindableProperty.Create(
nameof(IsToggled),
typeof(bool),
typeof(MyCustomToggleButton),
false,
propertyChanged: OnIsToggledChanged);
public bool IsToggled
{
set { SetValue(IsToggledProperty, value); }
get { return (bool)GetValue(IsToggledProperty); }
}
protected override void OnParentSet()
{
base.OnParentSet();
VisualStateManager.GoToState(this, "Unactive");
}
static async void OnIsToggledChanged(BindableObject bindable, object oldValue, object newValue)
{
uint delayValue = 100;
ToggleButton toggleButton = (ToggleButton)bindable;
bool isToggled = (bool)newValue;
toggleButton.IsEnabled = false;
await toggleButton.FadeTo(0.3, delayValue, Easing.Linear);
// Fire event
//toggleButton.Toggled?.Invoke(toggleButton, new ToggledEventArgs(isToggled));
if (isToggled)
{
// Set the visual state
VisualStateManager.GoToState(toggleButton, "Active");
}
else
{
// Set the visual state
VisualStateManager.GoToState(toggleButton, "Unactive");
}
await Task.Delay((int)delayValue);
await toggleButton.FadeTo(1, delayValue, Easing.Linear);
toggleButton.IsEnabled = true;
}
}
uj5u.com熱心網友回復：
基本上，切換按鈕具有三種狀態：Locked、Active、ToggledOff。可以對 Button 進行子類化，使其像開關一樣作業：點擊一次按鈕以打開按鈕，再次點擊以將其關閉。默認狀態為locked。請按照以下步驟操作：
第 1 步：在繼承自如下的共享專案中創建一個ToggleButton.cs ：Button
class ToggleButton : Button
{
public event EventHandler<ToggledEventArgs> Toggled;
public static BindableProperty IsToggledProperty =
BindableProperty.Create("IsToggled", typeof(bool), typeof(ToggleButton), false,
propertyChanged: OnIsToggledChanged);
public ToggleButton()
{
Clicked = (sender, args) => IsToggled ^= true;
}
public bool IsToggled
{
set { SetValue(IsToggledProperty, value); }
get { return (bool)GetValue(IsToggledProperty); }
}
protected override void OnParentSet()
{
base.OnParentSet();
VisualStateManager.GoToState(this, "Locked");
}
static void OnIsToggledChanged(BindableObject bindable, object oldValue, object newValue)
{
ToggleButton toggleButton = (ToggleButton)bindable;
bool isToggled = (bool)newValue;
// Fire event
toggleButton.Toggled?.Invoke(toggleButton, new ToggledEventArgs(isToggled));
// Set the visual state
VisualStateManager.GoToState(toggleButton, isToggled ? "Active": "ToggledOff" );
}
}
第 2 步：創建一個MyCustomToggleButton.xaml內容頁面，并在 Xaml 中使用它，如下所示：
<local:ToggleButton >
<VisualStateManager.VisualStateGroups>
<VisualStateGroup Name="ToggleStates">
<VisualState Name="ToggledOff">
<VisualState.Setters>
<Setter Property="Text" Value="Italic Off" />
<Setter Property="BackgroundColor" Value="#C0C0C0" />
<Setter Property="TextColor" Value="Black" />
</VisualState.Setters>
</VisualState>
<VisualState Name="Active">
<VisualState.Setters>
<Setter Property="Text" Value="D" />
<Setter Property="FontSize" Value="14" />
<Setter Property="BackgroundColor" Value="#20962d" />
<Setter Property="TextColor" Value="White" />
</VisualState.Setters>
</VisualState>
<VisualState Name="Locked">
<VisualState.Setters>
<Setter Property="Text" Value="D" />
<Setter Property="FontSize" Value="14" />
<Setter Property="BackgroundColor" Value="#FF0000" />
<Setter Property="TextColor" Value="White" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</local:ToggleButton>
MS官方參考鏈接： https ://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/button#creating-a-toggle-button
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/470475.html
標籤：C＃ xml xamarin xamarin.forms
下一篇：組合框中向上的下拉選項