2012-11-20 9 views
26

Sto utilizzando un controllo casella di controllo come questo:Come rendere casella di controllo più grande

<CheckBox VerticalAlignment="Bottom" IsChecked="{Binding Selected}" 
     Grid.Column="0" 
     FontSize="{StaticResource PhoneFontSizeLarge}" 
     Content="{Binding Name}"> 
</CheckBox> 

Il fatto è che a cambiare dimensioni per essere un po 'più grande. In questo caso il testo diventa più grande, ma il tick stesso rimane lo stesso. Sembra brutto, posso ridimensionare la casella di controllo in qualche modo?

UPDATE lo sto facendo su Windows Phone così LayoutTransform non appropriato qui

+0

Forse questo aiuterà: http://stackoverflow.com/questions/9087063/changing-the-size-of-a-checkbox-and-the-check-mark-in-it – robertk

risposta

2

finito con il seguente:

  1. Aggiungi una casella vuota
  2. Aprire il controllo in Expression Blend
  3. Selezionare casella di controllo ci
  4. Aperto Modifica modello -> Modifica Copia
  5. Si creerà un nuovo stile con modello personalizzato che potrai assegnare alle caselle di controllo.

ha prodotto circa 150 stile loc, ma non riuscivo a trovare un altro modo

62

Prova qualche cosa in questo modo: -

<CheckBox> 
    <CheckBox.LayoutTransform> 
     <ScaleTransform ScaleX="2" ScaleY="2" /> 
    </CheckBox.LayoutTransform> 
</CheckBox> 

È inoltre possibile controllare questo link

+0

LayoutTransform non è accessibile in windows phone – Sly

+0

Nella mia esperienza, l'approccio [StackPanel] (http://stackoverflow.com/a/13484367/350933) di @bmeredith è molto più bello con il posizionamento. L'approccio ScaleTransform richiede margini di compensazione per allineare l'output con altri controlli. – ctrlplusb

8
<StackPanel Height="80" 
       Name="StackPanel1" 
       Orientation="Horizontal"> 
     <Viewbox Height="{Binding Path=ActualHeight, ElementName=StackPanel1}"> 
      <CheckBox /> 
     </Viewbox> 
    </StackPanel> 

Regolazione dello StackPanel altezza secondo necessità.

+0

Senza offesa, ma cercato su Google e cercato la viewbox. Sembra giusto per la domanda, ma non posso aggiungerlo su una pagina xaml. PERCHÉ? Mi manca una biblioteca. Ho effettuato il check-in Aggiungi articoli sulla barra degli strumenti, era lì, ma non posso ancora aggiungerlo alla pagina. –

+0

Buona domanda. Sebbene non scrivo codice per WP7, ero sotto il presupposto che Viewbox fosse parte del WP7 ad un certo punto. Magari dai un'occhiata a questo link per alcune idee. http://www.c-sharpcorner.com/UploadFile/74f20d/working-with-viewbox-control-in-windows-phone-7/ – bmeredith

1
   ScaleTransform scale = new ScaleTransform(2.0, 2.0); 
       yourCheckBox.RenderTransformOrigin = new Point(0.5, 0.5); 
       yourCheckBox.RenderTransform = scale; 
0

basta aggiungere sotto codici menzione nel Windows Resource/UserControl, aumenterà automaticamente la dimensione predefinita del [] casella di controllo all'interno di un controllo Xaml.

<Style x:Key="FocusVisual"> 
     <Setter Property="Control.Template"> 
      <Setter.Value> 
       <ControlTemplate> 
        <Rectangle Margin="2" SnapsToDevicePixels="true" Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" StrokeThickness="1" StrokeDashArray="1 2"/> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 
    <SolidColorBrush x:Key="OptionMark.Static.Background" Color="#FFFFFFFF"/> 
    <SolidColorBrush x:Key="OptionMark.Static.Border" Color="#FF707070"/> 
    <Style x:Key="OptionMarkFocusVisual"> 
     <Setter Property="Control.Template"> 
      <Setter.Value> 
       <ControlTemplate> 
        <Rectangle Margin="14,0,0,0" SnapsToDevicePixels="true" Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" StrokeThickness="1" StrokeDashArray="1 2"/> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 

    <SolidColorBrush x:Key="OptionMark.MouseOver.Background" Color="#FFF3F9FF"/> 
    <SolidColorBrush x:Key="OptionMark.MouseOver.Border" Color="#FF5593FF"/> 
    <SolidColorBrush x:Key="OptionMark.MouseOver.Glyph" Color="#FF212121"/> 
    <SolidColorBrush x:Key="OptionMark.Disabled.Background" Color="#FFE6E6E6"/> 
    <SolidColorBrush x:Key="OptionMark.Disabled.Border" Color="#FFBCBCBC"/> 
    <SolidColorBrush x:Key="OptionMark.Disabled.Glyph" Color="#FF707070"/> 
    <SolidColorBrush x:Key="OptionMark.Pressed.Background" Color="#FFD9ECFF"/> 
    <SolidColorBrush x:Key="OptionMark.Pressed.Border" Color="#FF3C77DD"/> 
    <SolidColorBrush x:Key="OptionMark.Pressed.Glyph" Color="#FF212121"/> 
    <SolidColorBrush x:Key="OptionMark.Static.Glyph" Color="#FF212121"/> 
    <Style TargetType="{x:Type CheckBox}"> 
     <Setter Property="FocusVisualStyle" Value="{StaticResource FocusVisual}"/> 
     <Setter Property="Background" Value="{StaticResource OptionMark.Static.Background}"/> 
     <Setter Property="BorderBrush" Value="{StaticResource OptionMark.Static.Border}"/> 
     <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/> 
     <Setter Property="BorderThickness" Value="1"/> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="{x:Type CheckBox}"> 
        <Grid x:Name="templateRoot" Background="Transparent" SnapsToDevicePixels="True"> 
         <Grid.ColumnDefinitions> 
          <ColumnDefinition Width="Auto"/> 
          <ColumnDefinition Width="*"/> 
         </Grid.ColumnDefinitions> 
         <Border x:Name="checkBoxBorder" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="1" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"> 
          <Grid x:Name="markGrid"> 
           <Path x:Name="optionMark" Data="F1 M 9.97498,1.22334L 4.6983,9.09834L 4.52164,9.09834L 0,5.19331L 1.27664,3.52165L 4.255,6.08833L 8.33331,1.52588e-005L 9.97498,1.22334 Z " 
             Fill="{StaticResource OptionMark.Pressed.Glyph}" Margin="5" Opacity="0" Stretch="Uniform"/> 
           <Rectangle x:Name="indeterminateMark" Fill="{StaticResource OptionMark.Static.Glyph}" Margin="2" Opacity="0"/> 
          </Grid> 
         </Border> 
         <ContentPresenter x:Name="contentPresenter" Grid.Column="1" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/> 
        </Grid> 
        <ControlTemplate.Triggers> 
         <Trigger Property="HasContent" Value="true"> 
          <Setter Property="FocusVisualStyle" Value="{StaticResource OptionMarkFocusVisual}"/> 
          <Setter Property="Padding" Value="4,-1,0,0"/> 
         </Trigger> 
         <Trigger Property="IsMouseOver" Value="true"> 
          <Setter Property="Background" TargetName="checkBoxBorder" Value="{StaticResource OptionMark.MouseOver.Background}"/> 
          <Setter Property="BorderBrush" TargetName="checkBoxBorder" Value="{StaticResource OptionMark.MouseOver.Border}"/> 
          <Setter Property="Fill" TargetName="optionMark" Value="{StaticResource OptionMark.MouseOver.Glyph}"/> 
          <Setter Property="Fill" TargetName="indeterminateMark" Value="{StaticResource OptionMark.MouseOver.Glyph}"/> 
         </Trigger> 
         <Trigger Property="IsEnabled" Value="false"> 
          <Setter Property="Background" TargetName="checkBoxBorder" Value="{StaticResource OptionMark.Disabled.Background}"/> 
          <Setter Property="BorderBrush" TargetName="checkBoxBorder" Value="{StaticResource OptionMark.Disabled.Border}"/> 
          <Setter Property="Fill" TargetName="optionMark" Value="{StaticResource OptionMark.Disabled.Glyph}"/> 
          <Setter Property="Fill" TargetName="indeterminateMark" Value="{StaticResource OptionMark.Disabled.Glyph}"/> 
         </Trigger> 
         <Trigger Property="IsPressed" Value="true"> 
          <Setter Property="Background" TargetName="checkBoxBorder" Value="{StaticResource OptionMark.Pressed.Background}"/> 
          <Setter Property="BorderBrush" TargetName="checkBoxBorder" Value="{StaticResource OptionMark.Pressed.Border}"/> 
          <Setter Property="Fill" TargetName="optionMark" Value="{StaticResource OptionMark.Pressed.Glyph}"/> 
          <Setter Property="Fill" TargetName="indeterminateMark" Value="{StaticResource OptionMark.Pressed.Glyph}"/> 
         </Trigger> 
         <Trigger Property="IsChecked" Value="true"> 
          <Setter Property="Opacity" TargetName="optionMark" Value="1"/> 
          <Setter Property="Opacity" TargetName="indeterminateMark" Value="0"/> 
         </Trigger> 
         <Trigger Property="IsChecked" Value="{x:Null}"> 
          <Setter Property="Opacity" TargetName="optionMark" Value="0"/> 
          <Setter Property="Opacity" TargetName="indeterminateMark" Value="1"/> 
         </Trigger> 
        </ControlTemplate.Triggers> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style>