2010-08-17 7 views
1

J'essaie de penser à la meilleure façon de graduer deux panneaux proportionnellement. Si j'ai une grille qui contient deux toiles, les deux empilées horizontalement l'une à côté de l'autre, je veux que la toile (A) s'adapte à la taille de la toile (B), proportionnellement, cependant. Donc, essentiellement, si canvas (B) augmente en taille, canvas (A) diminue, et si canvas (A) augmente, canvas (B) diminue.Scale Two Canvas Proportionnellement

Je pense utiliser un convertisseur pour cela, mais je voulais savoir si quelqu'un avait de bonnes idées.

Voici un lien qui démontre le comportement souhaité. Reportez-vous à la commande de panoramique/zoom dans le coin inférieur droit de l'écran. Ce contrôle représente un aperçu de l'écran principal. Si vous appuyez sur le bouton de zoom dans la commande de panoramique/zoom, l'écran principal effectue un zoom avant et la zone rectangulaire "panoramique" du contrôle panoramique/zoom diminue en taille.

http://quince.infragistics.com/#/Search/ViewPattern modèle $ = Bouton + Groupes/PatternExamples $ guid = 289a497a-6632-455a-87b6-74ee70c2d3be

Merci!

Chris

+0

Ne serait-il inclure zoomant sur les images? Parce que cela peut être vraiment compliqué, selon le type de qualité que vous recherchez. – MrFox

+0

Non, gardez les choses simples. À des fins de test, j'aurai ma grille, qui contient deux toiles. Dans chaque toile j'ai un rectangle. Le rectangle dans Canvas (A) sera essentiellement mis à l'échelle en fonction du rectangle dans Canvas (B). J'ai aussi un bouton de zoom avant et arrière, juste pour ajuster les propriétés ScaleX et ScaleY dans ScaleTransform pour le rectangle dans Canvas (B) – Chris

Répondre

2

Un convertisseur est probablement la meilleure façon d'aller. Vous pouvez également utiliser RenderTransform.ScaleX/ScaleY au lieu d'ajuster la hauteur/largeur du canevas.

0

Voici un exemple de liaison à une propriété. Je ne sais pas si ce serait mieux qu'un convertisseur.

<Canvas Background="Blue"> 
    <Canvas x:Name="canvas1" ClipToBounds="True" Background="Red" Width="100" Height="100"> 
     <Canvas.RenderTransform> 
      <ScaleTransform ScaleX="{Binding ElementName=slider, Path=Value}" ScaleY="{Binding ElementName=slider, Path=Value}"/> 
     </Canvas.RenderTransform> 
    </Canvas> 

    <Canvas x:Name="canvas2" ClipToBounds="True" Background="Green" Grid.Column="2" Height="100" Width="100" Canvas.Left="200"> 
     <Canvas.RenderTransform> 
      <ScaleTransform ScaleX="{Binding ScaleValue2}" ScaleY="{Binding ScaleValue2}"/> 
     </Canvas.RenderTransform> 
    </Canvas> 
    <Slider x:Name="slider" Canvas.Top="200" Width="200" Value="{Binding Path=ScaleValue, Mode=TwoWay}" Maximum="2"></Slider> 
</Canvas> 

code:

public partial class Window1 : Window, INotifyPropertyChanged 
{ 
    public event PropertyChangedEventHandler PropertyChanged; 

    public Window1() 
    { 
     InitializeComponent(); 
     this.DataContext = this; 
    } 

    private void NotifyPropertyChanged(String info) 
    { 
     if (PropertyChanged != null) 
     { 
      PropertyChanged(this, new PropertyChangedEventArgs(info)); 
     } 
    } 

    private double scaleValue = 1; 
    public double ScaleValue 
    { 
     get 
     { 
      return scaleValue; 
     } 
     set 
     { 
      scaleValue = value; 
      NotifyPropertyChanged("ScaleValue"); 
      NotifyPropertyChanged("ScaleValue2"); 
     } 
    } 

    public double ScaleValue2 
    { 
     get 
     { 
      return slider.Maximum - ScaleValue; 
     } 
    } 
}