2012-11-23 16 views
19

मुझे एक छोटी सी समस्या है, मेरे पास एक समूह आइटम है जिसे मैं पृष्ठभूमि छवि देना चाहता हूं, जिसे इसे सही आयामों को बनाए रखना चाहिए, लेकिन डिफ़ॉल्ट रूप से यह छवि को बाईं ओर से दिखाता है, मैं चाहता हूं कि छवि केंद्रित करने के लिए।विंडोज 8 छवि वर्दीफिल केंद्रित

मेरी समस्या को और समझाने के लिए यहां एक उदाहरण दिया गया है। (ग्रे हिस्सा है क्या काटा गया है)

My problem

और मैं इस XAML

<Image Source="/url/to/image.jpg" Stretch="UniformToFill"/> 

उत्तर

13

मैं अपने समस्या को हल करने में कामयाब रहे है, मैं छवि कंटेनर से भी बड़ा यह में रखा गया था बनाया है और ऊर्ध्वाधर इसे केंद्र में गठबंधन किया।

<Grid HorizontalAlignment="Left" Width="250" Height="125"> 
    <Image Source="/url/to/image.jpg" Stretch="UniformToFill" Height="250" Margin="0" VerticalAlignment="Center"/> 
</Grid> 

छवि के अतिप्रवाह अदृश्य था :)

+0

क्षमा बस पर मिल गया और अपने संदेश को देखा और यह परीक्षण करने के लिए इसे लोड करने जा रहा था, यह वही है जो मैं याद कर रहा था, इसे ठीक करने के लिए कह रहा था। यदि आप संकल्प खो देते हैं तो एक ही चीज़ को एक व्यूबॉक्स में फिसलने के साथ प्रयास करें। खुशी है कि आपको अपना उपाय मिला है, इसे उत्तर के रूप में चिह्नित करना याद रखें। चीयर्स :) –

3

मुझे लगता है कि इसी तरह की स्थिति से व्यवहार करता है सिल्वरलाइट/विंडोज फोन के लिए एक व्यवहार लिखा था। मुझे जो चित्र दिखाना है वह बड़ा या उच्च हो सकता है और मुझे इसे एक वर्ग में प्रदर्शित करना होगा।

व्यवहार कंटेनर और तस्वीर दोनों की चौड़ाई/ऊंचाई अनुपात की गणना करता है। जिस पर सबसे बड़ा/उच्चतम है, मैं इस नियंत्रण प्रभाव को माता-पिता नियंत्रण के साथ बदलने के लिए छवि नियंत्रण का आकार बदलता हूं।

मेरे व्यवहार के साथ उपयोग करने के लिए यहां एक नमूना एक्सएएमएल है।

<Border Height="150" Width="150"> 
    <Image Source="{Binding BitmapImage}" Stretch="UniformToFill" 
      HorizontalAlignment="Center" VerticalAlignment="Center"> 
     <i:Interaction.Behaviors> 
      <b:FillParentBehavior /> 
     </i:Interaction.Behaviors> 
    </Image> 
</Border> 

यहां सी # कोड से एक अंश है। पूर्ण कोड यहां पाया जा सकता: FillParentBehavior.cs

double width = this.AssociatedObject.Width; 
double height = this.AssociatedObject.Height; 
var parentSize = new Size(this.parent.ActualWidth, this.parent.ActualHeight); 
var parentRatio = parentSize.Width/parentSize.Height; 

// determine optimal size 
if (this.AssociatedObject is Image) 
{ 
    var image = (Image)this.AssociatedObject; 
    if (image.Source is BitmapImage) 
    { 
     var bitmap = (BitmapImage)image.Source; 
     var imageSize = new Size(bitmap.PixelWidth, bitmap.PixelHeight); 
     var imageRatio = imageSize.Width/imageSize.Height; 
     if (parentRatio <= imageRatio) 
     { 
      // picture has a greater width than necessary 
      // use its height 
      width = double.NaN; 
      height = parentSize.Height; 
     } 
     else 
     { 
      // picture has a greater height than necessary 
      // use its width 
      width = parentSize.Width; 
      height = double.NaN; 
     } 
    } 
} 

this.AssociatedObject.Width = width; 
this.AssociatedObject.Height = height; 
+0

यह सहायक था .. धन्यवाद – Sayka

2

मामले में स्रोत छवि का आकार पहले से अज्ञात है मैं अलग चाल का इस्तेमाल किया था:

<Border Width="250" Height="250"> 
    <Border.Background> 
     <ImageBrush ImageSource="/url/to/image.jpg" 
        Stretch="UniformToFill"/> 
    </Border.Background> 
</Border>