Question

如果我想绑定类中的属性，我应该如何设置datacontext：

<Rectangle DataContext="Scaling" Height="{Binding VerticalSliderHeight}" Width="{Binding VerticalSliderHeight}">
  <Rectangle.Fill>
    <ImageBrush ImageSource="/Assets/Images/fader.png"/>
  </Rectangle.Fill>
</Rectangle>

班级：

public static class Scaling
{
    //Just For Slider Resource
    public static float VerticalSliderHeight { get; set; }
    public static float VerticalSliderWidth { get; set; }
    //
}

建议的答案是针对WPF的

关于xaml方面的更多信息：

<Page.Resources>

    <Style TargetType="Slider">
        <Setter Property="Background" Value="{ThemeResource SystemControlForegroundBaseMediumLowBrush}" />
        <Setter Property="BorderThickness" Value="{ThemeResource SliderBorderThemeThickness}" />
        <Setter Property="Foreground" Value="{ThemeResource SystemControlHighlightAccentBrush}" />
        <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
        <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
        <Setter Property="ManipulationMode" Value="None" />
        <Setter Property="UseSystemFocusVisuals" Value="True" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Slider">
                    <Grid Margin="{TemplateBinding Padding}">
                        <Grid.Resources>
                            <Style TargetType="Thumb" x:Key="SliderThumbStyleVertical">
                                <Setter Property="BorderThickness" Value="0" />
                                <Setter Property="Background" Value="{ThemeResource SystemControlForegroundAccentBrush}" />
                                <Setter Property="Template">
                                    <Setter.Value>
                                        <ControlTemplate TargetType="Thumb">

                                            <Rectangle Height="60" Width="30">
                                                <Rectangle.Fill>
                                                    <ImageBrush ImageSource="/Assets/Images/fader.png" Stretch="Uniform"/>
                                                </Rectangle.Fill>
                                            </Rectangle>

                                        </ControlTemplate>
                                    </Setter.Value>
                                </Setter>
                            </Style>
                            <Style TargetType="Thumb" x:Key="SliderThumbStyleHorizontal">
                                <Setter Property="BorderThickness" Value="0" />
                                <Setter Property="Background" Value="{ThemeResource SystemControlForegroundAccentBrush}" />
                                <Setter Property="Template">
                                    <Setter.Value>
                                        <ControlTemplate TargetType="Thumb">

                                            <Rectangle x:Name="HorizontalThumbRect" Height="30" Width="60">
                                                <Rectangle.Fill>
                                                    <ImageBrush ImageSource="/Assets/Images/fader2.png" Stretch="Uniform"/>
                                                </Rectangle.Fill>
                                            </Rectangle>

                                        </ControlTemplate>
                                    </Setter.Value>
                                </Setter>
                            </Style>
                        </Grid.Resources>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="*" />
                        </Grid.RowDefinitions>
                        <ContentPresenter x:Name="HeaderContentPresenter"
                  x:DeferLoadStrategy="Lazy"
                  Visibility="Collapsed"
                  Foreground="{ThemeResource SystemControlForegroundBaseHighBrush}"
                  Margin="{ThemeResource SliderHeaderThemeMargin}"
                  Content="{TemplateBinding Header}"
                  ContentTemplate="{TemplateBinding HeaderTemplate}"
                  FontWeight="{ThemeResource SliderHeaderThemeFontWeight}"
                  TextWrapping="Wrap" />
                        <Grid x:Name="SliderContainer" Background="Transparent" Grid.Row="1" Control.IsTemplateFocusTarget="True">
                            <Grid x:Name="HorizontalTemplate" MinHeight="44">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="Auto" />
                                    <ColumnDefinition Width="Auto" />
                                    <ColumnDefinition Width="*" />
                                </Grid.ColumnDefinitions>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="0" />
                                    <RowDefinition Height="Auto" />
                                    <RowDefinition Height="0" />
                                </Grid.RowDefinitions>
                                <Rectangle x:Name="HorizontalTrackRect"
                  Fill="DimGray"
                  Height="{ThemeResource SliderTrackThemeHeight}"
                  Grid.Row="1"
                  Grid.ColumnSpan="3" />
                  <Rectangle x:Name="HorizontalDecreaseRect" Fill="DimGray" Grid.Row="1" />
                  <Thumb x:Name="HorizontalThumb"
              Background="{ThemeResource SystemControlForegroundAccentBrush}"
              Style="{StaticResource SliderThumbStyleHorizontal}"
              DataContext="{TemplateBinding Value}"
              Grid.Row="0"
              Grid.RowSpan="3"
              Grid.Column="1"
              AutomationProperties.AccessibilityView="Raw" />
                            </Grid>
                            <Grid x:Name="VerticalTemplate" MinWidth="44" Visibility="Collapsed">
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="*" />
                                    <RowDefinition Height="Auto" />
                                    <RowDefinition Height="Auto" />
                                </Grid.RowDefinitions>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="0" />
                                    <ColumnDefinition Width="Auto" />
                                    <ColumnDefinition Width="0" />
                                </Grid.ColumnDefinitions>
                                <Rectangle x:Name="VerticalTrackRect"
                  Fill="DimGray"
                  Width="{ThemeResource SliderTrackThemeHeight}"
                  Grid.Column="1"
                  Grid.RowSpan="3" />
                                <Rectangle x:Name="VerticalDecreaseRect"
                  Fill="DimGray"
                  Grid.Column="1"
                  Grid.Row="2" />

                                <Thumb x:Name="VerticalThumb"
              Background="{ThemeResource SystemControlForegroundAccentBrush}"
              Style="{StaticResource SliderThumbStyleVertical}"
              DataContext="{TemplateBinding Value}"
              Grid.Row="1"
              Grid.Column="0"
              Grid.ColumnSpan="3"
              AutomationProperties.AccessibilityView="Raw"/>
                            </Grid>
                        </Grid>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Page.Resources>

似乎绑定在页面资源中出现问题。有什么想法吗？

Answer 1

好吧，如果您对DataBinding和MVVM概念不熟悉，可能会有点压倒性的，所以尽量以开放的心态围绕它。我会尝试尽可能地直截了当。

有两种方法可以解决这个问题，

将视图绑定到codeBehind
或将视图绑定到简单的ViewModel（MVVM模式）

我将为两者提供答案，只是初始部分不同，然后它们都有一个共同的功能。

用于将视图绑定到CodeBehind

为此，您需要将视图绑定到它自己的codeBehind，让视图知道您使用的绑定是在CodeBehind中执行此操作，在<Page>标记上使用

DataContext = "{Binding RelativeSource={RelativeSource Self}}"

现在您已经让View(.xaml)听取了codeBehind(.xaml.cs)

将其绑定到ViewModel（.cs）

为此，在您的项目下创建一个新的Class，并将其命名为"ViewNameViewModel"。现在转到您的视图，然后使用NameSpace在<Page>标记中添加xmlns:ViewModels="yourNameSpace"，请注意Visual Studio会显示智能感知，因此您只需从中选择。此外，还添加了Local命名空间，因此如果您在Local nameSpace中有一个viewModel（即没有子目录），那么您可以跳过添加NameSpace。

现在您已添加了NameSpace，您需要设置视图的DataContext，通过在<Page>标记

<Page xmlns:ViewModels="using:MyTestApp.ViewModels">
<Page.DataContext>
    <ViewModels:MainPageViewModel/>
</Page.DataContext>

现在您已经在两种情况下都拥有了DataContext个绑定的公共部分：

将您的class重置为使用double属性Height而Width属double而不是static也属于NotifyPropertyChanged使用INotifyPropertyChanged界面

public class Scaling :INotifyPropertyChanged
{
    public double VerticalSliderHeight
    {
        get { return verticalSliderHeight; }
        set 
        { 
           verticalSliderHeight = value;       
           NotifyPropertyChanged("VerticalSliderHeight"); 
        }
    }

    private double verticalSliderWidth;
    public double VerticalSliderWidth
    {
        get { return verticalSliderWidth; }
        set 
        { 
           verticalSliderWidth = value;
           NotifyPropertyChanged("VerticalSliderWidth"); 
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;

    internal void NotifyPropertyChanged(String info)
    {
        if (PropertyChanged != null)
        {
            PropertyChanged(this, new PropertyChangedEventArgs(info));
        }
    }
}

.cs

这种方式只要属性中的值发生更改，视图就会自动更新为最新值。

在.cs（CodeBehind或ViewModel）中添加一个属性，同时将您的NotifyPropertyChanged工具private Scaling mySliderData; public Scaling MySliderData { get { return mySliderData; } set { mySliderData = value; NotifyPropertyChanged("MySliderData"); } }和属性设为：

    <Rectangle Height="{Binding MySliderData.VerticalSliderHeight}" Width="{Binding MySliderData.VerticalSliderHeight}">
  <Rectangle.Fill>
    <ImageBrush ImageSource="/Assets/Images/fader.png"/>
  </Rectangle.Fill>
</Rectangle>

现在它已全部完成，只需绑定你的元素，如下所示：

   initComplete: function () {
              $("#example_paginate").css("display", "none");
           }

这种方式可以使代码具有可扩展性并且易于重构。如果有任何我愿意在评论部分提供帮助的话，我希望我已经解决了您的疑问

使用datacontext绑定

1 个答案: