Github：link

Question

我使用自定义控件创建如下所示的连接按钮：

def compute(sliced, lo, hi, left):
    num_invalid = 0
    start = 0
    search_for_start = True
    for end in range(lo, hi):
        if search_for_start and sliced[end] < left:
            start = end
            search_for_start = False
        elif not search_for_start and sliced[end] >= left:
            num_invalid += (end - start) * (end - start + 1) // 2
            search_for_start = True
    if not search_for_start:
        num_invalid += (hi - start) * (hi - start + 1) // 2
    return ((hi - lo) * (hi - lo + 1)) // 2 - num_invalid

def query(sliced, left, right):
    ans = 0
    start = 0
    search_for_start = True
    for end in range(len(sliced)):
        if search_for_start and sliced[end] <= right:
            start = end
            search_for_start = False
        elif not search_for_start and sliced[end] > right:
            ans += compute(sliced, start, end, left)
            search_for_start = True
    if not search_for_start:
        ans += compute(sliced, start, len(sliced), left)
    return ans

当我点击按钮时会触发一个事件：

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

这很好用，但我想做的是能够从我的C＃代码中选择其中一个按钮。

当我查看控件的源代码时，我看不到如何执行此操作。

如果有人对我应该做些什么有任何建议，例如选择第二个按钮，就像我点击它一样，我将不胜感激。

以下是我正在使用的代码：

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

共享代码

<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>

iOS渲染器

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); }
    }
}

Android渲染器

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);
    }
}

我很感激有关如何进行更改的任何建议。也有人知道Xamarin是否希望将其变成表单组件？

Answer 1

为什么不在共享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>

Answer 2

你有没有机会看到这个plugin - 它似乎非常适合你想要实现的目标。

为了能够以编程方式选择一个片段 - 即SelectedSegment - 您需要在渲染器级别实现此功能，并让他们将此选择转换为本机控件。此外，还建议覆盖OnElementPropertyChanged方法以订阅属性更改（例如SelectedSegment）并确保本机控制状态与共享表单元素保持同步，反之亦然。 / p>

编辑 - 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;
             }));
}

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

2 个答案:

样本用法

Github：link