堆棧內存溢出
  簡體   English   中英

在C＃后端，如何在分段控件中選擇元素？

[英]In the C# back end, how can I select an element in a Segmented Control?

 原文  2017-11-06 07:57:46  2   2    xamarin/ xamarin.forms

問題描述

我正在使用自定義控件來創建如下所示的連接按鈕： 

********************************************
*            *            *                *
*    One     *    Two     *     Three      *
*            *            *                *
********************************************

單擊按鈕時會觸發一個事件： 

void OnValueChanged(object sender, EventArgs e)
{
     switch (segControl.SelectedValue)
     {

這很好用，但我想做的是能夠從我的C＃代碼中選擇其中一個按鈕。

當我查看控件的源代碼時，我看不到如何執行此操作。

如果有人對我應該做什么有任何建議，例如選擇第二個按鈕，就像我點擊它一樣，我將不勝感激。

這是我正在使用的代碼： 

<local:SegmentedControl ValueChanged="OnValueChanged" SelectedSegment="{Binding CustomPointsSwitch}" x:Name="segControl" HorizontalOptions="End">
   <local:SegmentedControl.Children>
       <local:SegmentedControlOption Text="Two" />
       <local:SegmentedControlOption Text="Four" />
   </local:SegmentedControl.Children>
</local:SegmentedControl>

共享代碼 

public class SegmentedControl : View, IViewContainer<SegmentedControlOption>
{
    public IList<SegmentedControlOption> Children { get; set; }

    public SegmentedControl()
    {
        Children = new List<SegmentedControlOption>();
    }

    public event ValueChangedEventHandler ValueChanged;

    public delegate void ValueChangedEventHandler(object sender, EventArgs e);

    private string selectedValue;

    public string SelectedValue
    {
        get { return selectedValue; }
        set
        {
            selectedValue = value;
            if (ValueChanged != null)
                ValueChanged(this, EventArgs.Empty);
        }
    }
    public static readonly BindableProperty SelectedSegmentProperty = BindableProperty.Create("SelectedSegment", typeof(int), typeof(SegmentedControl), 0);
    public int SelectedSegment
    {
        get
        {
            return (int)GetValue(SelectedSegmentProperty);
        }
        set
        {
            SetValue(SelectedSegmentProperty, value);
        }
    }
}

public class SegmentedControlOption : View
{
    public static readonly BindableProperty TextProperty = BindableProperty.Create("Text", typeof(string), typeof(SegmentedControlOption), string.Empty);

    public string Text
    {
        get { return (string)GetValue(TextProperty); }
        set { SetValue(TextProperty, value); }
    }
}

iOS渲染器 

public class SegmentedControlRenderer : ViewRenderer<SegmentedControl, UISegmentedControl>
{
    public SegmentedControlRenderer()
    {
    }

    protected override void OnElementChanged(ElementChangedEventArgs<SegmentedControl> e)
    {
        base.OnElementChanged(e);

        var segmentedControl = new UISegmentedControl();
        for (var i = 0; i < e.NewElement.Children.Count; i++)
        {
            segmentedControl.InsertSegment(e.NewElement.Children[i].Text, i, false);
        }

        segmentedControl.ValueChanged += (sender, eventArgs) => {
            e.NewElement.SelectedSegment = (int)segmentedControl.SelectedSegment;
            e.NewElement.SelectedValue = segmentedControl.TitleAt(segmentedControl.SelectedSegment);
        };

        SetNativeControl(segmentedControl);
    }
}

Android渲染器 

public class SegmentedControlRenderer : ViewRenderer<SegmentedControl, RadioGroup>
{

    protected override void OnElementChanged(ElementChangedEventArgs<SegmentedControl> e)
    {
        base.OnElementChanged(e);

        var layoutInflater = (LayoutInflater)Context.GetSystemService(Context.LayoutInflaterService);

        var g = new RadioGroup(Context);
        g.Orientation = Orientation.Horizontal;
        g.CheckedChange += (sender, eventArgs) => {
            var rg = (RadioGroup)sender;
            if (rg.CheckedRadioButtonId != -1)
            {
                var id = rg.CheckedRadioButtonId;
                var radioButton = rg.FindViewById(id);
                var radioId = rg.IndexOfChild(radioButton);
                var btn = (RadioButton)rg.GetChildAt(radioId);
                var selection = (String)btn.Text;
                e.NewElement.SelectedValue = selection;
            }
        };

        for (var i = 0; i < e.NewElement.Children.Count; i++)
        {
            var o = e.NewElement.Children[i];
            var v = (SegmentedControlButton)layoutInflater.Inflate(Resource.Layout.SegmentedControl, null);
            v.Text = o.Text;
            if (i == 0)
                v.SetBackgroundResource(Resource.Drawable.segmented_control_first_background);
            else if (i == e.NewElement.Children.Count - 1)
                v.SetBackgroundResource(Resource.Drawable.segmented_control_last_background);
            g.AddView(v);
        }

        SetNativeControl(g);
    }
}

public class SegmentedControlButton : RadioButton
{
    private int lineHeightSelected;
    private int lineHeightUnselected;
    private Paint linePaint;

    public SegmentedControlButton(Context context, IAttributeSet attributes) : this(context, attributes, Resource.Attribute.segmentedControlOptionStyle)
    {
    }

    public SegmentedControlButton(Context context, IAttributeSet attributes, int defStyle) : base(context, attributes, defStyle)
    {
        Initialize(attributes, defStyle);
    }

    private void Initialize(IAttributeSet attributes, int defStyle)
    {
        var a = this.Context.ObtainStyledAttributes(attributes, Resource.Styleable.SegmentedControlOption, defStyle, Resource.Style.SegmentedControlOption);

        var lineColor = a.GetColor(Resource.Styleable.SegmentedControlOption_lineColor, 0);
        linePaint = new Paint();
        linePaint.Color = lineColor;

        lineHeightUnselected = a.GetDimensionPixelSize(Resource.Styleable.SegmentedControlOption_lineHeightUnselected, 0);
        lineHeightSelected = a.GetDimensionPixelSize(Resource.Styleable.SegmentedControlOption_lineHeightSelected, 0);

        a.Recycle();
    }

    protected override void OnDraw(Canvas canvas)
    {
        base.OnDraw(canvas);

        if (linePaint.Color != 0 && (lineHeightSelected > 0 || lineHeightUnselected > 0))
        {
            var lineHeight = Checked ? lineHeightSelected : lineHeightUnselected;

            if (lineHeight > 0)
            {
                var rect = new Rect(0, Height - lineHeight, Width, Height);
                canvas.DrawRect(rect, linePaint);
            }
        }
    }
}

我很感激有關如何進行更改的任何建議。 也有人知道Xamarin是否希望將其變成表單組件？

2 個解決方案

解決方案1
 3  2017-11-06 09:08:45

為什么不在共享xaml中設置邊距？ 

<local:SegmentedControl ValueChanged="OnValueChanged" SelectedSegment="{Binding CustomPointsSwitch}" x:Name="segControl" HorizontalOptions="End">
   <local:SegmentedControl.Children>
       <local:SegmentedControlOption Text="Two" Margin="8,0,8,0" />
       <local:SegmentedControlOption Text="Four" Margin="8,0,8,0" />
   </local:SegmentedControl.Children>
</local:SegmentedControl>

解決方案2
 2 已采納  2017-11-08 13:20:32

你有沒有機會看看這個插件 - 它似乎非常適合你想要實現的目標。

為了能夠以編程方式選擇一個段 - 即SelectedSegment - 您需要在渲染器級別實現它，並讓它們將此選擇轉換為本機控件。 此外，還建議重寫OnElementPropertyChanged方法以訂閱屬性更改（例如SelectedSegment ）並確保本機控件狀態與共享表單元素保持同步，反之亦然。

編輯 - 1：添加代碼示例

共享代碼 

public class SegmentedControl : View, IViewContainer<SegmentedControlOption>
{
    public IList<SegmentedControlOption> Children { get; set; }

    public SegmentedControl()
    {
        Children = new List<SegmentedControlOption>();
    }

    public event EventHandler ValueChanged;
    public static readonly BindableProperty SelectedValueProperty =
        BindableProperty.Create(
            "SelectedValue", typeof(string), typeof(SegmentedControl),
            defaultBindingMode: BindingMode.TwoWay,
            defaultValue: default(string), propertyChanged: OnSelectedValueChanged);

    public string SelectedValue
    {
        get { return (string)GetValue(SelectedValueProperty); }
        set { SetValue(SelectedValueProperty, value); }
    }

    static void OnSelectedValueChanged(BindableObject bindable, object oldValue, object newValue)
    {
        ((SegmentedControl)bindable).OnSelectedValueChangedImpl((string)oldValue, (string)newValue);
    }

    protected virtual void OnSelectedValueChangedImpl(string oldValue, string newValue)
    {
        ValueChanged?.Invoke(this, EventArgs.Empty);
        SelectedSegment = GetSelectedIndex(SelectedValue);
    }

    public static readonly BindableProperty SelectedSegmentProperty =
        BindableProperty.Create(
            "SelectedSegment", typeof(int), typeof(SegmentedControl),
            defaultBindingMode: BindingMode.TwoWay,
            defaultValue: default(int), propertyChanged: OnSelectedSegmentChanged);

    public int SelectedSegment
    {
        get { return (int)GetValue(SelectedSegmentProperty); }
        set { SetValue(SelectedSegmentProperty, value); }
    }

    private static void OnSelectedSegmentChanged(BindableObject bindable, object oldValue, object newValue)
    {
        ((SegmentedControl)bindable).OnSelectedSegmentChangedImpl((int)oldValue, (int)newValue);
    }

    protected virtual void OnSelectedSegmentChangedImpl(int oldValue, int newValue)
    {
        SelectedValue = GetSelectedValue(SelectedSegment);
    }

    int GetSelectedIndex(object selectedItem)
    {
        if (selectedItem == null)
            return -1;

        if (selectedItem is string optionText)
            return Children.IndexOf(Children.FirstOrDefault(x => Equals(x.Text, optionText)));

        return -1;
    }

    string GetSelectedValue(int index)
    {
        if (index >= 0 && index < Children.Count)
            return Children[index].Text;

        return null;
    }
}

//Keep SegmentedControlOption as same (No changes needed)
public class SegmentedControlOption : View
{
    ...
}

iOS渲染器 

public class SegmentedControlRenderer : ViewRenderer<SegmentedControl, UISegmentedControl>
{
    protected override void OnElementChanged(ElementChangedEventArgs<SegmentedControl> e)
    {
        base.OnElementChanged(e);

        UISegmentedControl segmentedControl = null;
        if (Control == null)
        {
            segmentedControl = new UISegmentedControl();

            for (var i = 0; i < e.NewElement.Children.Count; i++)
            {
                segmentedControl.InsertSegment(Element.Children[i].Text, i, false);
            }

            SetNativeControl(segmentedControl);
            SetSelectedSegment();
        }

        if (e.OldElement != null)
        {
            // Unsubscribe from event handlers and cleanup any resources
            if (segmentedControl != null)
                segmentedControl.ValueChanged -= NativeValueChanged;
        }

        if (e.NewElement != null)
        {
            // Configure the control and subscribe to event handlers
            segmentedControl.ValueChanged += NativeValueChanged;
        }
    }

    protected override void OnElementPropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e)
    {
        base.OnElementPropertyChanged(sender, e);

        if (e.PropertyName == nameof(SegmentedControl.SelectedSegment))
            SetSelectedSegment();
    }

    void NativeValueChanged(object sender, EventArgs e)
    {
        if (Element is SegmentedControl formsElement)
        {
            formsElement.SelectedSegment = (int)Control.SelectedSegment;
        };
    }

    void SetSelectedSegment()
    {
        if (Element is SegmentedControl formsElement)
        {
            if (formsElement.SelectedSegment >= 0 && formsElement.SelectedSegment < Control.NumberOfSegments)
                Control.SelectedSegment = formsElement.SelectedSegment;
        }
    }
}

Android渲染器 

public class SegmentedControlRenderer : ViewRenderer<SegmentedControl, RadioGroup>
{
    protected override void OnElementChanged(ElementChangedEventArgs<SegmentedControl> e)
    {
        base.OnElementChanged(e);

        RadioGroup nativeControl = null;
        if (Control == null)
        {
            // Instantiate the native control and assign it to the Control property with the SetNativeControl method
            var layoutInflater = (LayoutInflater)Context.GetSystemService(Context.LayoutInflaterService);
            nativeControl = new RadioGroup(Context)
            {
                Orientation = Orientation.Horizontal
            };

            for (var i = 0; i < e.NewElement.Children.Count; i++)
            {
                var o = e.NewElement.Children[i];
                var v = (SegmentedControlButton)layoutInflater.Inflate(Resource.Layout.SegmentedControl, null);
                v.Text = o.Text;
                if (i == 0)
                    v.SetBackgroundResource(Resource.Drawable.segmented_control_first_background);
                else if (i == e.NewElement.Children.Count - 1)
                    v.SetBackgroundResource(Resource.Drawable.segmented_control_last_background);
                nativeControl.AddView(v);
            }

            SetNativeControl(nativeControl);
            SetSelectedSegment();
        }

        if (e.OldElement != null)
        {
            // Unsubscribe from event handlers and cleanup any resources
            if (nativeControl != null)
                nativeControl.CheckedChange -= NativeCheckedChanged;
        }

        if (e.NewElement != null)
        {
            nativeControl.CheckedChange += NativeCheckedChanged;
        }
    }

    protected override void OnElementPropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e)
    {
        base.OnElementPropertyChanged(sender, e);

        if (e.PropertyName == nameof(SegmentedControl.SelectedSegment))
            SetSelectedSegment();
    }

    void NativeCheckedChanged(object sender, EventArgs e)
    {
        if (Element is SegmentedControl formsElement)
        {
            var rg = (RadioGroup)sender;
            if (rg.CheckedRadioButtonId != -1)
            {
                var id = rg.CheckedRadioButtonId;
                var radioButton = rg.FindViewById(id);
                var radioIndex = rg.IndexOfChild(radioButton);
                formsElement.SelectedSegment = radioIndex;
            }
        };
    }

    void SetSelectedSegment()
    {
        if (Element is SegmentedControl formsElement)
        {
            if (formsElement.SelectedSegment >= 0 && formsElement.SelectedSegment < Control.ChildCount)
            {
                var radioBtn = (RadioButton)Control.GetChildAt(formsElement.SelectedSegment);
                radioBtn.Checked = true;
            }
        }
    }
}

//Keep SegmentedControlOption as same (No changes needed)
public class SegmentedControlButton : RadioButton
{ 
    ...
}

樣本用法

在此輸入圖像描述 

<StackLayout Margin="20">
    <local:SegmentedControl ValueChanged="OnValueChanged" SelectedSegment="{Binding CustomPointsSwitch}" x:Name="segControl" HorizontalOptions="End">
        <local:SegmentedControl.Children>
            <local:SegmentedControlOption Text="One" />
            <local:SegmentedControlOption Text="Two" />
            <local:SegmentedControlOption Text="Three" />
        </local:SegmentedControl.Children>
    </local:SegmentedControl>

    <Label Text="{Binding Path=SelectedSegment, StringFormat='Selected Segment: {0}', Source={x:Reference segControl}}" />
    <Label Text="{Binding Path=SelectedValue, StringFormat='Selected Value: {0}', Source={x:Reference segControl}}" />

    <StackLayout Orientation="Horizontal">
        <Button Text="Select One" Command="{Binding SelectCommand}" CommandParameter="0" HorizontalOptions="Start" />
        <Button Text="Select Two" Command="{Binding SelectCommand}" CommandParameter="1" HorizontalOptions="CenterAndExpand" />
        <Button Text="Select Three" Command="{Binding SelectCommand}" CommandParameter="2" HorizontalOptions="End" />
    </StackLayout>

    <Button Text="Set selection using SelectedValue" Clicked="Handle_Clicked" />
</StackLayout>

代碼背后 

public partial class SegmentedSamplePage : ContentPage
{
    public SegmentedSamplePage()
    {
        InitializeComponent();

        this.BindingContext = new PageViewModel
        {
            CustomPointsSwitch = 1
        };
    }

    void OnValueChanged(object sender, EventArgs e)
    {
        System.Diagnostics.Debug.WriteLine(this.segControl.SelectedValue);
    }

    void Handle_Clicked(object sender, System.EventArgs e)
    {
        this.segControl.SelectedValue = "Two";
    }
}

public class PageViewModel : ObservableObject
{
    int _customPointsSwitch;
    public int CustomPointsSwitch
    {
        get { return _customPointsSwitch; }
        set
        {
            SetProperty(ref _customPointsSwitch, value, nameof(CustomPointsSwitch));
        }
    }

    Command _selectCommand;
    public Command SelectCommand => _selectCommand ?? (_selectCommand = new Command((object param) =>
             {
                 if (Int32.TryParse(param?.ToString(), out int index))
                     CustomPointsSwitch = index;
             }));
}

Github： 鏈接

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 如何在具有C＃后端而不是XAML的模板上綁定XAML元素？ 在C＃后端中將資源聲明為Class時，如何訪問資源？ 如何將DynamicResource的值發送到自定義控件C＃后端？ 如何在后端C＃和渲染器之間共享字段的值？ 如何在C＃后端的模板中更改標簽的顏色？ 我可以將XAML網格的高度綁定回我的C＃后端代碼嗎？ 如何通過直接調用后端C＃的VM修改我的應用程序，以改用Xamarin MessagingCenter？ 為什么不能在ViewModel中聲明的后端C＃中填充數組？ 有什么辦法可以在使用C＃后端時加快向頁面添加新元素的速度嗎？ 如果我在XAML中使用ContentPage.BindingContext定義綁定上下文，那么如何在C＃后端訪問它？
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM