wpfelementcontroltemplatecommandparameter

WPF, Control can't access to ElementName from the CommandParameter with the underlying Control in ControlTemplate


i would need some help with this code, I could bind the imageBrush with the name: "ImageBrush1F" inside the CommandParameter of Border.InputBindings.

The first code works, but the second one doesn't work..

After I changed my design where I use ControlTemplate, it can't find "ImageBrush1F" within ControlTemplate, how do I achieve the same result when using ControlTemplate? This is the new design code:

<Border Tag="AstronautWoman"
        Style="{StaticResource AvatarBorder}"
        HorizontalAlignment="Center"
        VerticalAlignment="Top"
        Margin="0 0 20 0">
    <Border.InputBindings>
        <MouseBinding Command="{Binding ImageSelectCommand}"
                      CommandParameter="{Binding ElementName=ImageBrush1F}"
                      MouseAction="LeftClick"/>
    </Border.InputBindings>

    <Ellipse>
        <Ellipse.Fill>
            <ImageBrush x:Name="ImageBrush1F" ImageSource="/Images/Avatar/astronaut_woman.png"/>
        </Ellipse.Fill>
    </Ellipse>
</Border>



<RadioButton Name="Astronaut"
             Tag="BlockInternet"
             Command="{Binding ImageSelectCommand}"
             CommandParameter="{Binding ElementName=ImageBrush1M}"
             Height="100" Width="100"
             Margin="0 0 20 30">
    <RadioButton.Template>
        <ControlTemplate TargetType="RadioButton">
            <Border Name="border"
                    BorderBrush="#2B1058" BorderThickness="2"
                    Height="{TemplateBinding Height}"
                    Width="{TemplateBinding Width}" 
                    CornerRadius="50"
                    Background="White">
                <Ellipse>
                    <Ellipse.Fill>
                        <ImageBrush x:Name="ImageBrush1M" ImageSource="/Images/Avatar/astronaut.png"/>
                    </Ellipse.Fill>
                </Ellipse>
            </Border>
    </RadioButton.Template>
</RadioButton>

Solution

  • I think you should define the ImageBrush at higher level such as Window.Resources and refer it. If you desparately need to accomplish it within that RadioButton, I would not recommend but you can utilize unused RadioButton.Background property like the following.

    <RadioButton Name="Astronaut"
                 Tag="BlockInternet"
                 Command="{Binding ImageSelectCommand}"
                 CommandParameter="{Binding RelativeSource={RelativeSource Self}, Path=Background}"
                 Height="100" Width="100"
                 Margin="0 0 20 30">
        <RadioButton.Background>
            <ImageBrush x:Name="ImageBrush1M" ImageSource="/Images/Avatar/astronaut.png"/>
        </RadioButton.Background>
        <RadioButton.Template>
            <ControlTemplate TargetType="RadioButton">
                <Border Name="border"
                        BorderBrush="#2B1058" BorderThickness="2"
                        Height="{TemplateBinding Height}"
                        Width="{TemplateBinding Width}"
                        CornerRadius="50"
                        Background="White">
                    <Ellipse Fill="{TemplateBinding Background}"/>
                </Border>
            </ControlTemplate>
        </RadioButton.Template>
    </RadioButton>