仅更改拍打框的颜色

时间:2019-05-31 08:44:24

标签: c# xaml xamarin.forms

我正在使用一种方法来更改带绑定的ListView中我的框架的颜色,当点击框架时,我只想更改该框架的颜色,并更改所有其他框架的颜色。

我的xaml代码:

<Frame>
...

<telerikDataControls:RadListView x:Name="sizesListView" Margin="2,0,2,2">
                            <telerikDataControls:RadListView.ItemTemplate>
                                <DataTemplate>
                                    <listView:ListViewTemplateCell>
                                        <listView:ListViewTemplateCell.View>
                                            <Frame Padding="0" CornerRadius="3.5" BackgroundColor="{Binding MainColor, Source={x:Static local:SelectedColor.CurrentColor}}">
                                                    <Grid RowSpacing="0">
                                                        <Grid.RowDefinitions>
                                                            <RowDefinition Height="*"/>
                                                            <RowDefinition Height="*"/>
                                                        </Grid.RowDefinitions>
                                                        <Label Text="{Binding Path=Key}" FontAttributes="Bold" HorizontalTextAlignment="Center" VerticalTextAlignment="Center"/>
                                                        <Label Text="{Binding Path=Value}"  Grid.Row="1" HorizontalTextAlignment="Center" VerticalTextAlignment="Center"/>
                                                    </Grid>
                                                </Frame>
                                        </listView:ListViewTemplateCell.View>
                                    </listView:ListViewTemplateCell>
                                </DataTemplate>
                            </telerikDataControls:RadListView.ItemTemplate>
                            <telerikDataControls:RadListView.LayoutDefinition>
                                <listView:ListViewGridLayout SpanCount="3" x:Name="SizeSpanCount" HorizontalItemSpacing="3"/>
                            </telerikDataControls:RadListView.LayoutDefinition>
</telerikDataControls:RadListView>
<Frame.GestureRecognizers>
    <TapGestureRecognizer 
        Tapped="TapGestureRecognizer_Tapped" NumberOfTapsRequired="1"/>
    </Frame.GestureRecognizers>
</Frame>

我的隐藏代码:

public ExtendedButton()
        {
            InitializeComponent();

            selectedBorder = Color.FromHex("#FF8A00");
            defaultBorder = Color.FromHex("#FFFFFF");
            SelectedColor.CurrentColor.MainColor = defaultBorder;
        }

private void TapGestureRecognizer_Tapped(object sender, EventArgs e)
        {
            _isSelected = !_isSelected;
            var frame = (Frame)sender;

            if (_isSelected)
            {
                SelectedColor.CurrentColor.MainColor = selectedBorder;
            }
            else
            {
                SelectedColor.CurrentColor.MainColor = defaultBorder;
            }
        }

public class SelectedColor : INotifyPropertyChanged
    {
        public static SelectedColor CurrentColor = new SelectedColor();

        private Color _mainColor;

        public Color MainColor
        {
            get { return _mainColor; }
            set
            {
                _mainColor = value;
                OnPropertyChanged(nameof(MainColor));
            }
        }

        private Color _backgroundColor;

        public Color BackgroundColor
        {
            get { return _backgroundColor; }
            set
            {
                _backgroundColor = value;
                OnPropertyChanged(nameof(BackgroundColor));
            }
        }

        public event PropertyChangedEventHandler PropertyChanged;

        protected virtual void OnPropertyChanged(string propertyName)
        {
            if (PropertyChanged == null)
                return;

            PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
        }
    }

我希望如此:

I expected this

我明白了:

I got this

请注意,每当我选择一个框架时,其他框架中的其他按钮颜色也会改变。

1 个答案:

答案 0 :(得分:1)

您正在使用静态绑定来设置底部按钮的框架:x:Static local:SelectedColor.CurrentColor。由于static属性,所有按钮都使用相同的属性。因此,当您通过外部框架更改一个框架时,其他框架也发生了改变。

您可以将父Frame的绑定上下文设置为SelectedColor类:

<Frame x:Name="ParentFrame">
    <Frame.BindingContext>
        <local:SelectedColor/>
    </Frame.BindingContext>

    ...

    <Frame.GestureRecognizers>
        <TapGestureRecognizer Command="{Binding MyCommand}" NumberOfTapsRequired="1"/>
    </Frame.GestureRecognizers>
</Frame>

在该类中定义命令:

public SelectedColor()
{
    MyCommand = new Command(() =>
    {
        // Change the color
        MainColor = Color.Orange;
    });
}
public ICommand MyCommand { set; get; }

最后,将底部框架的背景色的绑定源设置为该父框架,以便您可以通过父框架的命令事件来动态更改它。

<listView:ListViewTemplateCell.View>
    <Frame Padding = "0" CornerRadius="3.5" BackgroundColor="{Binding BindingContext.MainColor, Source={x:Reference ParentFrame}}">
        ...
    </Frame>
</listView:ListViewTemplateCell.View>