绑定使用的DataContext

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概念的新手，可能会有些不知所措，所以请试着用开放的思维来围绕它。我会尽力使其尽可能地直线前进。

---

有两种方法，你可以去了解它，

1. 绑定观对代码隐藏
2. 或绑定查看一个简单的模型（MVVM模式）

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

为视图绑定到代码隐藏

为此，您需要将视图绑定到它自己的代码隐藏，让视图知道你正在使用的结合是在代码隐藏做到这一点，在您<Page>标签使用

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

现在，你有你的View(.xaml)听你codeBehind(.xaml.cs)

它绑定到视图模型（的.cs）

对于这个创建项目并将其命名为"ViewNameViewModel"下一个新的Class。现在转到您的视图，然后使用xmlns:ViewModels="yourNameSpace"在<Page>标记中添加NameSpace请注意，Visual Studio会显示您的智能感知，以便您可以简单地从那里选择。此外，本地名称空间已添加，因此如果您在本地名称空间中有viewModel（即无子目录），则可以跳过添加名称空间。

现在你已经添加了命名空间，则需要设置视图的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实施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> 

通过这种方式，您的代码具有可扩展性，并且易于重构。我希望我解决了你的查询，如果有什么我会很乐意帮助评论部分