01 Button

作者: 归零者 分类: UI学习 发布时间: 2017-09-06 12:03

学习目标

  • Button Clicked 事件
  • sender 就是对象!
  • StyleId可为查看对象唯一标识

    一般来说Visual Elements 的特性可以简单区分为”纯显示” 和”互动”。

    例如,Label就是一个”纯显示”的元件;而最常见的”互动”元件就是Button

    当手指按下Button时,手机会先给予使用者画面上的回馈,等手指移开Button后,Clicked事件才会被触发。

    若在Clicked事件内需要取得更多资讯时,可以使用事件参数(EventArgs)来传递资料。

    Button Clicked 事件

    直接看范例了解如何将方法加入Button的Clicked事件内(当然未来会看到Xaml的用法),

    按钮被按下后,会在stacklayout内新增一笔时间资讯:


public class ButtonLoggerPage : ContentPage
{
StackLayout loggerLayout = new StackLayout();
public ButtonLoggerPage()
{
// Create the Button and attach Clicked handler.
Button button = new Button
{
Text = "Log the Click Time"
};
button.Clicked += OnButtonClicked;
this.Padding = new Thickness(5, Device.OnPlatform(20, 0, 0), 5, 0);
// Assemble the page.
this.Content = new StackLayout
{
Children =
{
button,
new ScrollView
{
VerticalOptions = LayoutOptions.FillAndExpand,
Content = loggerLayout
}
}
};
}
void OnButtonClicked(object sender, EventArgs args)
{
// Add Label to scrollable StackLayout.
loggerLayout.Children.Add(new Label
{
Text = "Button clicked at " + DateTime.Now.ToString("T")
});
}
}


如图所示,每一平台上的按钮都长得不一样,因为按钮是经由原生码去转换的。

Button可更改的属性如下:

  • 的FontFamily字符串类型
  • 字号 double类型的
  • FontAttributes型FontAttributes的
  • TEXTCOLOR Color类型(默认为Color.Default)
  • 边框颜色 Color类型(默认为Color.Default)
  • 边框宽度型双的(默认为0)
  • BorderRadius型双的(默认值为5)
  • Image (将在13章讨论)

    当然,Button是继承至VisualElement,也有 BackgroundColor等属性可以更改。


    Walking the visual tree

    这标题我实在不知道怎翻…

    这小节要讲的是,可以用Clicked的sender参数,去取得与此对象相关的父元素或子元素。

    以此例来说,可以将sender转换成Button本身对象如下:

    按钮按钮=(按钮)发送者;

    若要取得父元素可以如下:

    StackLayout outerLayout =(StackLayout)button.Parent;

    而要取得父元素底下的子元素时可以如下:

    滚动型滚动视图=(滚动型)outerLayout.Children [1];

    不过齁,尽量不要这样去抓取元素,会让程式码变得有点乱,若StackLayout有改变,抓取子元素就要重新 “Walking the visual tree”

    事件共享方法

    把同一方法指派给不同按钮时,可能会遇到一个问题,
    若不同按钮要在同一方法内执行不同事情时,需要判断对象是哪位。

    底下程式码有两个颗按钮共用一个方法,
    判断是哪个对象则直接用按钮(object)本身当作条件:


public class TwoButtonsPage : ContentPage
{
Button addButton, removeButton;
StackLayout loggerLayout = new StackLayout();
public TwoButtonsPage()
{
// Create the Button views and attach Clicked handlers.
addButton = new Button
{
Text = "Add",
HorizontalOptions = LayoutOptions.CenterAndExpand
};
addButton.Clicked += OnButtonClicked;
removeButton = new Button
{
Text = "Remove",
HorizontalOptions = LayoutOptions.CenterAndExpand,
IsEnabled = false
};
removeButton.Clicked += OnButtonClicked;
this.Padding = new Thickness(5, Device.OnPlatform(20, 0, 0), 5, 0);
// Assemble the page.
this.Content = new StackLayout
{
Children =
{
new StackLayout
{
Orientation = StackOrientation.Horizontal,
Children =
{
addButton,
removeButton
}
},
new ScrollView
{
VerticalOptions = LayoutOptions.FillAndExpand,
Content = loggerLayout
}
}
};
}
void OnButtonClicked(object sender, EventArgs args)
{
Button button = (Button)sender;
//用物件本身來做判斷...
if (button == addButton)
{
// Add Label to scrollable StackLayout.
loggerLayout.Children.Add(new Label
{
Text = "Button clicked at " + DateTime.Now.ToString("T")
});
}
else
{
// Remove topmost Label from StackLayout.
loggerLayout.Children.RemoveAt(0);
}
// Enable "Remove" button only if children are present.
removeButton.IsEnabled = loggerLayout.Children.Count > 0;
}


结果如下:

如有看前一章节,应该看过用Lambda写在事件内的方法,

Button Clicked事件也可以用Lambda来写如下:

button.Clicked += (sender, args) =>
{
label.Text = “Button clicked at ” + DateTime.Now.ToString(“T”);
}
StyleId

若按钮变多,全部都用对象(object)做条件判断的话,程式会相当乱

Visual Element类别有提供一个 StyleId 属性,
由于此属性在Xamairn.Forms其他地方不会用到,可以指派任何你想放入的字串,也可以当作对象唯一的Id来使用。

底下的范例程式有五个StackLayout,最外层一个StackLayout 包含四个StackLayout,而这四个StackLayout 分别包含着0 ~ 9 按钮和一个退回按钮。

每颗按钮都设定其StyleId,拿来当作唯一Id。

public class SimplestKeypadPage : ContentPage
{
Label displayLabel; Button backspaceButton; public SimplestKeypadPage()
{ // Create a vertical stack for the entire keypad.
StackLayout mainStack = new StackLayout
{
VerticalOptions = LayoutOptions.Center,
HorizontalOptions = LayoutOptions.Center
};
// First row is the Label.
displayLabel = new Label
{
FontSize = Device.GetNamedSize(NamedSize.Large, typeof(Label)),
VerticalOptions = LayoutOptions.Center,
HorizontalTextAlignment = TextAlignment.End
};
mainStack.Children.Add(displayLabel);
// Second row is the backspace Button.
backspaceButton = new Button
{
Text = "\u21E6",
FontSize = Device.GetNamedSize(NamedSize.Large, typeof(Button)),
IsEnabled = false
};
backspaceButton.Clicked += OnBackspaceButtonClicked;
mainStack.Children.Add(backspaceButton);
// Now do the 10 number keys.
StackLayout rowStack = null;
for (int num = 1; num <= 10; num++)
{
if ((num - 1) % 3 == 0)
{
rowStack = new StackLayout
{
Orientation = StackOrientation.Horizontal
};
mainStack.Children.Add(rowStack);
}
Button digitButton = new Button
{
Text = (num % 10).ToString(),
FontSize = Device.GetNamedSize(NamedSize.Large, typeof(Button)),
StyleId = (num % 10).ToString()
};
digitButton.Clicked += OnDigitButtonClicked;
// For the zero button, expand to fill horizontally.
if (num == 10)
{
digitButton.HorizontalOptions = LayoutOptions.FillAndExpand;
}
rowStack.Children.Add(digitButton);
} this.Content = mainStack;
}
void OnDigitButtonClicked(object sender, EventArgs args)
{
Button button = (Button)sender;
displayLabel.Text += (string)button.StyleId;
backspaceButton.IsEnabled = true;
}
void OnBackspaceButtonClicked(object sender, EventArgs args)
{
string text = displayLabel.Text;
displayLabel.Text = text.Substring(0, text.Length - 1);
backspaceButton.IsEnabled = displayLabel.Text.Length > 0;
}
}


画面如下:

如果觉得我的文章对您有用,请随意赞赏。您的支持将鼓励我继续创作!

说点什么

avatar
  Subscribe  
提醒
跳至工具栏