2013-07-11 3 views
3

MVVM 표시 등을 사용하고 있습니다. ListPicker를 내 View Model의 관측 가능 컬렉션에 연결하려고합니다.ListPicker (WP Toolkit의) Blendable (MVVM Light)을 어떻게 만들 수 있습니까?

listPicker에서 itemSource에 바인딩하여이 작업을 수행 할 수있었습니다. 내 문제는 "FullScreenOnly"모드로 들어가기를 원한다는 것입니다. 내 컬렉션에서 데이터 템플릿으로 속성 이름을 가져올 수 있고 응용 프로그램을 실행할 때 나타나는 것처럼 내 datatemplate itemSource 상속해야한다고 생각했습니다.

그러나 블렌드 값이 표시되지 않습니다. 장점 중 하나는 "blendablity"로 Expression Blend에서 더미 값을 쉽게 볼 수있게 해줍니다.

보기 모델

public class AddProductPriceVm : ViewModelBase 
    { 
     /// <summary> 
     /// Initializes a new instance of the AddProductPrice class. 
     /// </summary> 
     public AddProductPriceVm() 
     { 
      if (ViewModelBase.IsInDesignModeStatic) 
      { 
       Stores = new ObservableCollection<Store> 
       { 
        new Store 
        { 
          Name = "test1", 
          Address = "123 fake street", 
          City = "Fake City", 
          Region = "FC", 
          PostalCode = "123414", 
        }, 
         new Store 
        { 
           Name = "test2", 
          Address = "123 fake street", 
          City = "Fake City", 
          Region = "FC", 
          PostalCode = "123414", 
        } 
       }; 
      } 
      else 
      { 
       Stores = new ObservableCollection<Store> 
       { 
        new Store 
        { 
          Name = "test1", 
          Address = "123 fake street", 
          City = "Fake City", 
          Region = "FC", 
          PostalCode = "123414", 
        }, 
         new Store 
        { 
           Name = "test2", 
          Address = "123 fake street", 
          City = "Fake City", 
          Region = "FC", 
          PostalCode = "123414", 
        } 
       }; 
      } 
      //Stores = new ObservableCollection<Store>(); 

     } 


     public ObservableCollection<Store> Stores { get; set; } 
    } 

그래서 디자인 모드에서 내 더미 데이터로 채워야하고 라이브 발사 때 내 더미 데이터를 채워야한다. 지금은 라이브 모드에서만 데이터를 채 웁니다. 여기

내가 아니라 혼합 라이브 모드에서이 작품을 말했듯이 내 마크 업

<Grid.Resources> 
     <DataTemplate x:Name="PickerItemTemplate"> 
      <StackPanel Orientation="Horizontal"> 
       <TextBlock Text="{Binding Name}" Margin="12 0 0 0"/> 
      </StackPanel> 
     </DataTemplate> 
     <DataTemplate x:Name="PickerFullModeItemTemplate"> 
      <Grid Height="129" Margin="16 21 0 20" Width="294" d:DesignWidth="198" d:DesignHeight="80"> 
       <TextBlock Text="{Binding Name}" FontSize="24" FontFamily="{StaticResource PhoneFontFamilyLight}" Height="34" VerticalAlignment="Top" TextWrapping="Wrap" Margin="0,0,8,0"/> 
       <TextBlock Text="Address: " HorizontalAlignment="Left" Margin="0,38,0,0" Width="92" Height="31" VerticalAlignment="Top"/> 
       <TextBlock Foreground="Green" TextWrapping="Wrap" Margin="0,69,0,0" Height="54" VerticalAlignment="Top" FontSize="18.667" Text="{Binding FullAddress}"/> 
       <Line x:Name="lineDivider" Stroke="White" RenderTransformOrigin="0.488,0.437" VerticalAlignment="Bottom" X2="500" StrokeThickness="3" Opacity="0.5" /> 
      </Grid> 
     </DataTemplate> 
    </Grid.Resources> 




    <toolkit:ListPicker ExpansionMode="FullScreenOnly" x:Name="lpStores" ItemTemplate="{StaticResource PickerItemTemplate}" FullModeItemTemplate="{StaticResource PickerFullModeItemTemplate}" Header="Cities" FullModeHeader="Cities" CacheMode="BitmapCache" Margin="22,173,35,0" Height="101" VerticalAlignment="Top" ItemsSource="{Binding Stores, Mode=TwoWay}"/> 

위해 가지고 것입니다. enter image description here

위의 블렌드 표현식 4에서 볼 수 있듯이 나는 내가 원하는 바지 값을보고 있습니다.

그러나 나는

enter image description here

이 뭔지를 얻을 수

enter image description here

나는 단지 내 하드 코딩 값과 아무것도를 참조 여기까지 혼합에 데이터 템플릿을 편집하려고 할 때.

내 측면에는 3 개의 텍스트 블록과 1 개의 라인 분배기가 있습니다. 내가 본다면 그들이 제대로 데이터 바인딩되어 있음을 알 수 있습니다.

그들은 단지 나타나지 않습니다. 나는 내가 다시 데이터 바인딩해야 표시하고 싶지만 그것은 그럼 난 blendablity를 얻을 수 있지만 어려운로 (종류 이상 무엇을) 전혀 작동하지 않습니다 살고있는이

Text="{Binding Stores[0].Name} 

같은 바인딩에두고있는 경우 내 컬렉션의 첫 번째 인덱스로 코딩되어 있습니다.

답변

1

내 생각 엔 디자이너가 전체 모드 항목 템플릿을 편집 할 때 데이터 컨텍스트를 잃어버린 것 같습니다. 그러나 데이터 템플릿의 Grid에 d:DataContext="{Binding Stores[0]}" 선언을 추가하여 혼합 할 수있었습니다. 그런데 세 번째 TextBlock 바인딩은 FullAddress으로 잘못 표기되었지만 모델에는 Address 만있었습니다. 모두 모두, 그것은 다음 템플릿 (생략 관련이없는 부분)을 수정하여 잘 보이는 : VS & 혼합 2012 WP8.0 프로젝트에 테스트

<DataTemplate x:Name="PickerFullModeItemTemplate"> 
    <Grid Height="129" Margin="16 21 0 20" Width="294" d:DesignWidth="198" d:DesignHeight="80" d:DataContext="{Binding Stores[0]}"> 
     ... 
     <TextBlock Foreground="Green" TextWrapping="Wrap" Margin="0,69,0,0" Height="54" VerticalAlignment="Top" FontSize="18.667" Text="{Binding Address}"/> 
     ... 
    </Grid> 
</DataTemplate> 

이 나를 위해 잘 작동합니다.

+0

이것은 작동하는 것 같습니다. 나는 다소 놀랍다. (그러나 다시 나는 데이터 바인딩을 처음 접한다.)나는 그리드의 모든 아이들이 이제는 첫 번째 "스토어"에만 액세스하고 다른 상점에는 액세스 할 수 없다고 생각합니다. – chobo2

+0

@ chobo2'd :'접두사 때문에 우리는 그리드에 대한 디자인 타임 데이터 컨텍스트 만 설정했습니다. 'd :'접두어는 블렌드와 관련이 있으며'mc : Ignorable'으로 표시되어 있으며 실행 중에는 무시됩니다. 따라서 여기서는 런타임 동작을 망치고있는 것이 아니라 디자이너가 데이터 컨텍스트를 찾을 수 있도록 도와줍니다. 자세한 내용은 [link] (http://blogs.msdn.com/b/mcsuksoldev/archive/2010/08/27/designdata-mvvm-support-in-blend-vs2010-and-wpf-silverlight.aspx)를 참조하십시오. – htuomola

+0

아, 멋지다 "d :"를 잊어 버렸습니다. – chobo2