在 C# 中为 windows phone 8 创建基于 UserControl 的 SegmentControl答案

【问题标题】：Create SegmentControl based on UserControl in C# for windows phone 8在 C# 中为 windows phone 8 创建基于 UserControl 的 SegmentControl
【发布时间】：2016-05-11 22:41:27
【问题描述】：

我对在 windows phone 上进行开发还是很陌生。目前我想做一个segment control。在 iOS 中是这样的：

我所做的如下。
1 基于usercontrol创建一个类：

public partial class WCCSegmentControl : UserControl

2 为这个类创建一个属性来表示这个段控件的按钮数量：

public static readonly DependencyProperty ButtonsCountProperty = DependencyProperty.Register("ButtonsCount", typeof(int), typeof(WCCSegmentControl), new PropertyMetadata(ButtonsCountChanged));

3 我创建函数ButtonsCountChanged:

private static void ButtonsCountChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
    ((WCCSegmentControl)d).ButtonsCount = (int)e.NewValue;
}

4 我也有这一套，得到：

public int ButtonsCount
{
    get
    {
        return (int)GetValue(ButtonsCountProperty);
    }

    set
    {
        SetValue(ButtonsCountProperty, value);

    }
}

5 在构造函数中，我这样做：

public WCCSegmentControl()
{
    InitializeComponent();

    buttons = new List<Button>();

    for (int i = 0; i < ButtonsCount; i++)
    {
        Button button = new Button();
        button.Height = 64;
        button.Width = 64;
        buttons.Add(button);
        stackPanelSegmentControlRoot.Children.Add(button);
    } 
}

XAML中的6，我将ButtonsCount属性设置为2，但是我调试它发现在构造函数中，ButtonsCount总是0。

有人知道我的代码哪里出错了吗？
谢谢！

【问题讨论】：

删除所有代码。不要试图重新发明轮子。使用ItemsControl。请不要在基于 XAML 的技术中的过程代码中创建或操作 UI 元素。这就是 XAML 的用途。
@HighCore 我确实想弄清楚哪里出了问题。你有什么主意吗？谢谢。
是的，您的代码中的所有内容都是错误的。这不是您在基于 XAML 的技术中定义基于项目的 UI 的方式，请阅读上面链接的 ItemsControl 教程。

标签： c# windows-phone-8 user-controls

【解决方案1】：

你应该为 RadioButton 创建一个模板

示例：

    <Grid
        Background="{StaticResource SegmentedControlColor2}"
        BorderBrush="{StaticResource SegmentedControlColor1 }"
        BorderThickness="{TemplateBinding BorderThickness}"
        x:Name="MainGrid">


        <VisualStateManager.VisualStateGroups>


            <VisualStateGroup x:Name="CommonStates">
                <VisualState x:Name="Normal"/>
                <VisualState x:Name="PointerOver"/>
                <VisualState x:Name="Pressed"/>
                <VisualState x:Name="Disabled"/>
            </VisualStateGroup>

            <VisualStateGroup x:Name="CheckStates">
                <VisualState x:Name="Checked">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="MainGrid">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SegmentedControlColor1}" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SegmentedControlColor2}" />
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>

                    <VisualState x:Name="Unchecked"/>
                <VisualState x:Name="Indeterminate"/>
            </VisualStateGroup>

        </VisualStateManager.VisualStateGroups>

        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="auto"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>


        <Grid VerticalAlignment="Top" Height="{TemplateBinding Height}" Margin="{TemplateBinding Margin}">

        </Grid>

        <ContentPresenter x:Name="ContentPresenter"
                          Content="{TemplateBinding Content}"
                          ContentTemplate="{TemplateBinding ContentTemplate}"
                          ContentTransitions="{TemplateBinding ContentTransitions}"
                          HorizontalAlignment="Center"
                          VerticalAlignment="Center"
                          AutomationProperties.AccessibilityView="Raw"
                          Grid.Column="1"
                          Foreground="{StaticResource SegmentedControlColor1}"
                          TextWrapping="Wrap"/>
    </Grid>

</ControlTemplate>

并将 RadioButtons 放入 ItemsControl（在您的页面上）。

<ItemsControl>
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <StackPanel Orientation="Horizontal"/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>

                <RadioButton    Height="40" Content="Test 4" Checked="radio_Checked" Template="{StaticResource SegmentedControl}"  BorderThickness="1,1,0,1"/>
                <RadioButton    Height="40" Content="Test 4" Checked="radio_Checked" Template="{StaticResource SegmentedControl}"  BorderThickness="1"/>
                <RadioButton    Height="40" Content="Test 4" Checked="radio_Checked" Template="{StaticResource SegmentedControl}"  BorderThickness="0,1,1,1"/>
</ItemsControl>

【讨论】：