Changer les Images sur la Coutume de Case à cocher dans WPF

Tout ce que j'ai créé le suivant personnalisé CheckBox qui utilise des images au lieu d'une CheckBox. Cela fonctionne bien, cependant, je veux être en mesure de changer les images que nécessaire. Idéalement, je voudrais utiliser les ressources d'application Properties.Resources.SomeImage16 (un .fichier png). Le code XAML est

<Style x:Key="styleCustomCheckBox" 
       TargetType="{x:Type CheckBox}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type CheckBox}">
                <StackPanel Orientation="Horizontal">
                    <Image x:Name="imageCheckBox" 
                           Width="16" 
                           Height="16" 
                           Source="F:\Camus\ResourceStudio\Graphics\Images\UnPinned16.png"/>
                    <ContentPresenter VerticalAlignment="Center"/>
                </StackPanel>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsChecked" Value="False">
                        <Setter TargetName="imageCheckBox" 
                                Property="Source" 
                                Value="F:\Camus\ResourceStudio\Graphics\Images\Pinned16.png"/>
                    </Trigger>
                    <Trigger Property="IsChecked" Value="True">
                        <Setter TargetName="imageCheckBox" 
                                Property="Source"
                                Value="F:\Camus\ResourceStudio\Graphics\Images\UnPinned16.png"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Avec la mise en œuvre

<ListBox SelectionMode="Single" >
    <StackPanel Orientation="Horizontal">
        <CheckBox Style="{StaticResource styleCustomCheckBox}" 
                  HorizontalAlignment="Left" 
                  VerticalAlignment="Center"
                  Margin="4,0,4,0"/>
        <TextBlock VerticalAlignment="Top" 
                   Text="SomeRecentDocument.resx"/>
    </StackPanel>
</ListBox>

Comment puis-je modifier les images utilisées pour la coutume CheckBox (c'est à dire changer la épinglée/onu-épinglé à cocher/croix etc.) sans avoir à créer un nouveau style/modèle?

Merci pour votre temps.

1 - Ne pas utiliser le format Png pour tout. WPF n'est pas winforms. L'utilisation de graphiques Vectoriels chaque fois que possible. 2 - Vous souhaitez peut-être créer quelques Attached Properties et le lier à celui de la ControlTemplate.
Si cela était permis alors un .NET application aura accès à tout lecteur.
Il n'est pas clair ce que vous demandez... est-il sur la modification de l'image en fonction de la case à cocher état? Si donc, à l'aide de déclencheurs pourrait fonctionner, mais vous avez déjà quelques triggers... est-ce que la solution que vous avez essayé n'est pas de travail et vous avez besoin d'aide à la faire fonctionner?
J'ai un travail personnalisé contrôle de case à cocher avec des images comme épinglé/détaché. Je veux savoir comment/si il est possible de changer les images de ces états lorsque j'utilise le contrôle...
comment puis-je obtenir un vecteur de l'image de mon Expression .les fichiers de conception? Je peux exporter en XAML, mais les résultats exportés pour certaines images sont complexes et constitués de plusieurs couches...

OriginalL'auteur MoonKnight | 2013-08-30

c#checkbox wpf

Comme déjà mentionné @HighCore le besoin de la capacité à utiliser des graphiques vectoriels. Dans ce cas, l'utilisation de la Path, où en Data aux coordonnées spécifiées sur lequel l'objet est dessiné (MSDN).

Avantages:

Ne le rangez pas dans les fichiers de petite taille
De changer dynamiquement la couleur, la taille et la forme entière

Inconvénients (à mon avis):

Vous ne pouvez pas toujours trouver le bon Data pour la Path

Environ moins: Il y a des sites spécialisés (http://www.modernuiicons.com) et des utilitaires pour convertir l'image à Data.

De changer de style de CheckBox à l'aide de la Path:

Style

<Style x:Key="styleCustomCheckBox" TargetType="{x:Type CheckBox}">
<Setter Property="FontFamily" Value="Verdana" />
<Setter Property="FontSize" Value="14" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type CheckBox}">
<StackPanel Orientation="Horizontal">
<Path x:Name="MyPin" Width="18" Height="18" Stretch="Fill" Fill="#FF000000"
Data="F1 M 56.1355,32.5475L 43.4466,19.8526C 42.7886,20.4988 42.298,21.2123 41.9749,21.9932C 41.6519,22.7741 41.4903,23.5729 41.4903,24.3895C 41.4903,25.1942 41.6529,25.987 41.9779,26.7679L 34.0577,34.6821C 33.3918,34.3372 32.6991,34.0776 31.9796,33.9032C 31.2601,33.7288 30.5298,33.6415 29.7885,33.6415C 28.623,33.6415 27.4953,33.8526 26.4052,34.2748C 25.315,34.697 24.3419,35.3342 23.4856,36.1865L 30.2344,42.9174L 25.9027,47.9032L 22.6532,51.8425L 20.5988,54.5836C 20.1212,55.2892 19.8823,55.753 19.8823,55.975L 19.8645,56.0701L 19.9002,56.088L 19.9002,56.1474L 19.9358,56.1058L 20.0131,56.1236C 20.2351,56.1236 20.6989,55.8888 21.4045,55.419L 24.1457,53.3765L 28.0849,50.1151L 33.0945,45.7775L 39.8016,52.5025C 40.6579,51.6462 41.2961,50.6731 41.7163,49.5829C 42.1365,48.4928 42.3466,47.367 42.3466,46.2056C 42.3466,45.4603 42.2603,44.729 42.0879,44.0115C 41.9155,43.294 41.6548,42.6003 41.3069,41.9304L 49.2202,34.0161C 50.0011,34.3372 50.7939,34.4978 51.5986,34.4978C 52.4192,34.4978 53.2189,34.3362 53.9979,34.0132C 54.7768,33.6901 55.4894,33.2015 56.1355,32.5475 Z "/>
<ContentPresenter VerticalAlignment="Center" Margin="10,0,0,0" />
</StackPanel>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="False">
<Setter TargetName="MyPin" Property="Data" Value="F1 M 32.3691,30.2225L 33.2253,29.3901L 15.361,11.5258C 13.9814,12.7067 12.6951,13.9936 11.5148,15.3738L 26.6252,30.4842C 27.743,30.1631 28.8767,30.0025 30.0263,30.0025C 30.8191,30.0025 31.6,30.0759 32.3691,30.2225 Z M 45.5039,49.3629L 60.6292,64.4826C 62.0123,63.2996 63.3017,62.0101 64.4846,60.6268L 46.6218,42.7866L 45.7834,43.619L 45.9439,44.7726L 45.9915,45.9261L 45.8785,47.6713L 45.5039,49.3629 Z M 56.1355,32.5475L 43.4466,19.8526C 42.7886,20.4987 42.298,21.2123 41.9749,21.9932C 41.6519,22.7741 41.4903,23.5729 41.4903,24.3895C 41.4903,25.1942 41.6529,25.987 41.9779,26.7679L 34.0577,34.6821C 33.3918,34.3372 32.6991,34.0776 31.9796,33.9032C 31.2601,33.7288 30.5298,33.6415 29.7885,33.6415C 28.623,33.6415 27.4953,33.8526 26.4052,34.2748C 25.315,34.697 24.3419,35.3342 23.4856,36.1865L 30.2344,42.9174L 25.9027,47.9032L 22.6532,51.8425L 20.5988,54.5836C 20.1212,55.2892 19.8823,55.753 19.8823,55.975L 19.8645,56.0701L 19.9002,56.0879L 19.9002,56.1474L 19.9358,56.1058L 20.0131,56.1236C 20.2351,56.1236 20.6989,55.8888 21.4045,55.419L 24.1457,53.3765L 28.0849,50.1151L 33.0945,45.7775L 39.8016,52.5025C 40.6579,51.6462 41.2961,50.6731 41.7163,49.5829C 42.1365,48.4928 42.3466,47.367 42.3466,46.2056C 42.3466,45.4603 42.2603,44.729 42.0879,44.0115C 41.9155,43.294 41.6548,42.6003 41.306,41.9304L 49.2202,34.0161C 50.0011,34.3372 50.7939,34.4978 51.5986,34.4978C 52.4192,34.4978 53.219,34.3362 53.9979,34.0132C 54.7768,33.6901 55.4894,33.2015 56.1355,32.5475 Z " />                                
<Setter TargetName="MyPin" Property="Fill" Value="Gray" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

Using

<StackPanel Orientation="Vertical" HorizontalAlignment="Center">
<CheckBox Height="35"
Style="{StaticResource styleCustomCheckBox}" 
Content="MySolution1" />
<CheckBox Height="35"
Style="{StaticResource styleCustomCheckBox}" 
Content="MySolution2" />
</StackPanel>

Output

Changer les Images sur la Coutume de Case à cocher dans WPF

Nous pouvons également stocker les Path's en ressources, et se référer à eux comme comme ceci:

<Path x:Key="MyPath" Data="F1 M 38,19C 48.4934,19 57,27.5066 ... />
...
<Setter TargetName="MainPath" Property="Data"
Value="{Binding Source={StaticResource MyPath}, Path=Data}" />

Edit

Pour spécifier arbitraire des icônes, j'ai créé deux attachées des propriétés de dépendance (type string):

IsCheckedOnData
IsCheckedOffData

IsCheckedOnData contient Data valeur par IsChecked = "True", IsCheckedOffData valeur par IsChecked = "False".

Maintenant, vous avez besoin seulement de déterminer les cordes d'icônes et de définir une ressource (par exemple).

Exemple complet:

XAML

<Window x:Class="CustomCheckBoxHelp.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:CustomCheckBoxHelp"
xmlns:sys="clr-namespace:System;assembly=mscorlib"
WindowStartupLocation="CenterScreen"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<sys:String x:Key="Up">
F1 M 37.8516,35.625L 34.6849,38.7917L 23.6016,50.2708L 
23.6016,39.9792L 37.8516,24.9375L 52.1016,39.9792L 52.1016,
50.2708L 41.0182,38.7917L 37.8516,35.625 Z
</sys:String>
<sys:String x:Key="Down">
F1 M 37.8516,39.5833L 52.1016,24.9375L 52.1016,35.2292L 
37.8516,50.2708L 23.6016,35.2292L 23.6016,24.9375L 37.8516,39.5833 Z
</sys:String>
<Style x:Key="styleCustomCheckBox" TargetType="{x:Type CheckBox}">
<Setter Property="FontFamily" Value="Verdana" />
<Setter Property="FontSize" Value="14" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type CheckBox}">
<StackPanel Orientation="Horizontal">
<Path x:Name="MyPin" Width="18" Height="18" Stretch="Fill" Fill="#FF000000" 
Data="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(local:CustomCheckBoxClass.IsCheckedOnData)}" />
<ContentPresenter VerticalAlignment="Center" Margin="10,0,0,0" />
</StackPanel>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="False">
<Setter TargetName="MyPin" Property="Data"
Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(local:CustomCheckBoxClass.IsCheckedOffData)}" />
<Setter TargetName="MyPin" Property="Fill" Value="Gray" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid>
<StackPanel Orientation="Vertical" HorizontalAlignment="Center" Background="Beige">
<CheckBox Height="35" 
local:CustomCheckBoxClass.IsCheckedOnData="{StaticResource Up}"
local:CustomCheckBoxClass.IsCheckedOffData="{StaticResource Down}"
Style="{StaticResource styleCustomCheckBox}" 
Content="MySolution1" />
<CheckBox Height="35" 
local:CustomCheckBoxClass.IsCheckedOnData="{StaticResource Up}"
local:CustomCheckBoxClass.IsCheckedOffData="{StaticResource Down}"
Style="{StaticResource styleCustomCheckBox}" 
Content="MySolution2" />
</StackPanel>
</Grid>
</Window>

Code behind

public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();            
}
}
public class CustomCheckBoxClass : DependencyObject
{
#region IsCheckedOnDataProperty
public static readonly DependencyProperty IsCheckedOnDataProperty;
public static void SetIsCheckedOnData(DependencyObject DepObject, string value)
{
DepObject.SetValue(IsCheckedOnDataProperty, value);
}
public static string GetIsCheckedOnData(DependencyObject DepObject)
{
return (string)DepObject.GetValue(IsCheckedOnDataProperty);
}
#endregion
#region IsCheckedOffDataProperty
public static readonly DependencyProperty IsCheckedOffDataProperty;
public static void SetIsCheckedOffData(DependencyObject DepObject, string value)
{
DepObject.SetValue(IsCheckedOffDataProperty, value);
}
public static string GetIsCheckedOffData(DependencyObject DepObject)
{
return (string)DepObject.GetValue(IsCheckedOffDataProperty);
}
#endregion
static CustomCheckBoxClass()
{
PropertyMetadata MyPropertyMetadata = new PropertyMetadata(string.Empty);
IsCheckedOnDataProperty = DependencyProperty.RegisterAttached("IsCheckedOnData",
typeof(string),
typeof(CustomCheckBoxClass),
MyPropertyMetadata);
IsCheckedOffDataProperty = DependencyProperty.RegisterAttached("IsCheckedOffData",
typeof(string),
typeof(CustomCheckBoxClass),
MyPropertyMetadata);
}        
}

Note: Dans le style je n'ai pas utilisé TemplateBinding parce que TemplateBinding ne fonctionne pas à l'extérieur d'un modèle ou à l'extérieur de son VisualTree de la propriété, de sorte que vous pouvez même pas utiliser TemplateBinding à l'intérieur d'un modèle de déclencheur. Par conséquent, nous devons utiliser la construction {RelativeSource TemplatedParent} et un Path égale à la dépendance de la propriété dont la valeur que vous voulez récupérer.

Merci beaucoup pour la réponse. Il semble étrange d'utiliser une telle chaîne pour les données d'images. Si c'est vraiment la norme, alors ainsi soit-il. J'ai tous mes propres icônes conçu dans l'Expression de la conception, je vais donc regarder dans un utilitaire de conversion... je voulais savoir si, comment changer l'image réelle de la case à cocher personnalisé - dire, si je voulais afficher les tiques et les croix au lieu de cela, comment cela peut-il être fait avec la création d'un autre modèle - ou n'est-ce pas possible?
Veuillez voir mon edit.
Génial. Vraiment l'apprécier. Merci beaucoup et bon week-end...
La meilleure pratique serait de garder cette image de vecteur de données dans un autre fichier de ressources au lieu de la ressource locale.
Je voudrais référence plus des graphiques vectoriels complexes à partir d'un fichier de ressources. Pouvez-vous jeter un oeil à cette nouvelle question stackoverflow.com/questions/18541408/...

OriginalL'auteur Anatoliy Nikolaev

1

Désolé, je ne sais pas encore comment faire référence à une image de ces ressources, mais si vous pouvez ajouter les images dans un dossier nommé Images dans votre répertoire racine de l'application, alors vous serez en mesure de référencer les images simplement comme ceci:
```
<Image Source="/ApplicationName;component/Images/SomeImage16.png" />
```
Merci pour la réponse...

OriginalL'auteur Sheridan

Vous devez vous connecter pour publier un commentaire.