आइटम नियंत्रण और ग्रिड

Question

के साथ WPF गतिशील लेआउट मैं एक WPF फॉर्म बना रहा हूं। आवश्यकताओं में से एक यह है कि इसमें एक क्षेत्र-आधारित लेआउट है ताकि नियंत्रण को किसी सेक्टर/कक्षों में स्पष्ट रूप से रखा जा सके।

मैं एक टिक टीएसी को पैर की अंगुली उदाहरण बनाया है नीचे मेरी समस्या संप्रेषित करने के लिए:

public class XMoveViewModel : MoveViewModel 
{ 
} 
public class OMoveViewModel : MoveViewModel 
{ 
} 
public class MoveViewModel 
{ 
    public int Row { get; set; } 
    public int Column { get; set; } 
} 

फार्म के DataContext एक उदाहरण के लिए सेट है:

दो प्रकार के और एक आधार प्रकार हैं का:

public class MainViewModel : ViewModelBase 
{ 
    public MainViewModel() 
    { 
     Moves = new ObservableCollection<MoveViewModel>() 
     { 
      new XMoveViewModel() { Row = 0, Column = 0 }, 
      new OMoveViewModel() { Row = 1, Column = 0 }, 
      new XMoveViewModel() { Row = 1, Column = 1 }, 
      new OMoveViewModel() { Row = 0, Column = 2 }, 
      new XMoveViewModel() { Row = 2, Column = 2} 
     }; 
    } 
    public ObservableCollection<MoveViewModel> Moves 
    { 
     get; 
     set; 
    } 
} 

और अंत में, XAML इस तरह दिखता है:

<Window.Resources> 
    <DataTemplate DataType="{x:Type vm:XMoveViewModel}"> 
     <Image Source="XMove.png" Grid.Row="{Binding Path=Row}" Grid.Column="{Binding Path=Column}" Stretch="None" /> 
    </DataTemplate> 
    <DataTemplate DataType="{x:Type vm:OMoveViewModel}"> 
     <Image Source="OMove.png" Grid.Row="{Binding Path=Row}" Grid.Column="{Binding Path=Column}" Stretch="None" /> 
    </DataTemplate> 
</Window.Resources> 
<Grid> 
    <ItemsControl ItemsSource="{Binding Path=Moves}"> 
     <ItemsControl.ItemsPanel> 
      <ItemsPanelTemplate> 
       <Grid ShowGridLines="True"> 
        <Grid.RowDefinitions> 
         <RowDefinition /> 
         <RowDefinition /> 
         <RowDefinition /> 
        </Grid.RowDefinitions> 
        <Grid.ColumnDefinitions> 
         <ColumnDefinition /> 
         <ColumnDefinition /> 
         <ColumnDefinition /> 
        </Grid.ColumnDefinitions> 
       </Grid> 
      </ItemsPanelTemplate> 
     </ItemsControl.ItemsPanel> 
    </ItemsControl> 
</Grid> 

जब मैंने शुरू किया था तब मेरे लिए इतना स्पष्ट नहीं था कि आइटम्सकंट्रोल तत्व वास्तव में एक कंटेनर में प्रत्येक आइटम को लपेटता है, इसलिए मेरा ग्रिड.रो और ग्रिड। कॉलम बाइंडिंग को अनदेखा कर दिया जाता है क्योंकि छवियों को सीधे ग्रिड के भीतर नहीं रखा जाता है। इस प्रकार, सभी छवियां डिफ़ॉल्ट पंक्ति और कॉलम (0, 0) में रखी जाती हैं।

क्या हो रहा है:

What is happening http://i48.tinypic.com/29xyl9j.png

वांछित परिणाम:

The desired result http://i50.tinypic.com/2druhqd.png

तो, मेरे सवाल यह है: मैं कैसे एक ग्रिड में मेरी नियंत्रण के गतिशील स्थान प्राप्त कर सकते हैं ? मैं एक एक्सएएमएल/डेटा बाध्यकारी/एमवीवीएम-अनुकूल समाधान पसंद करूंगा।

धन्यवाद। http://www.centrolutions.com/downloads/TicTacToe.zip

Answer 1

आप सही रास्ते पर कर रहे हैं:

मैं यहाँ अंतिम कोड डाल दिया है। आपको बस Style बनाने की आवश्यकता है और इसे ItemsControl.ItemContainerStyle पर लागू करें। फिर, शैली में, Grid.Row और Grid.Column के लिए एक सेटटर निर्दिष्ट करें। ItemContainerStyle प्रत्येक आइटम के लिए जेनरेट किए गए कंटेनरों पर लागू होगा।