Связывание с помощью 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. Свяжите Вид на CodeBehind
2. или свяжи Вид на простой 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 покажет вам intellisense, чтобы вы могли просто выбрать оттуда. Кроме того, добавлено пространство имен Local, поэтому, если у вас есть viewModel в Local nameSpace (без подкаталога), вы можете пропустить добавление 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)); 
     } 
    } 
} 

This пути, как только значения в изменении свойств, то просматривать обновления себя в последние значения.

В вашем .cs (CodeBehind или ViewModel) добавить собственность, также сделать свой .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> 

Этот способ позволяет масштабировать ваш код и легко рефакторировать. Надеюсь, я решил ваш запрос, если я что-нибудь буду рад помочь в разделе комментариев.