none
After the WPF's TabItem background image is changed, clicking the TabItem background will change to blank RRS feed

  • Question

  • Excuse me, I now set the WPF TabItem background property with a picture, select the other TabItem when the picture is displayed properly.

    However, the selected TabItem, the picture will become blank, I find the Internet,

    teaching is not much, or change the XAML, the picture can be displayed, but replaced Header not seen,


    May I ask you advanced why is it? 

    Wednesday, November 29, 2017 6:41 AM

Answers

  • Because TabItem when selected will trigger IsSelected, 
    this time the background color will change
    Your wording is changed to the background color when 
    it was not selected Practice two
    The first one, covering Header content directly
    The first one, covering Header content directly
    
    <TabItem Width="83" Height="55" BorderBrush="{x:Null}" Foreground="White">
    	<TabItem.Header>
    		<Image Width="Auto" Height="Auto" Source="PIC/ButtonImg.png" />
    	</TabItem.Header>
    </TabItem>


    • Marked as answer by KingWalker Wednesday, November 29, 2017 7:06 AM
    Wednesday, November 29, 2017 6:54 AM
  • Second, rewrite Style:
    
    <TabItem Width="83" Height="55" BorderBrush="{x:Null}" Foreground="White">
    	<TabItem.Style>
    		<Style TargetType="{x:Type TabItem}">
    			<Setter Property="Template">
    				<Setter.Value>
    					<ControlTemplate TargetType="{x:Type TabItem}">
    						<Image x:Name="Image"/>
    						<ControlTemplate.Triggers>
    							<Trigger Property="IsSelected" Value="True">
    								<Setter TargetName="Image" Property="Image.Source" Value="PIC/ButtonImg.png" />
    							</Trigger>
    							<Trigger Property="IsSelected" Value="False">
    								<Setter TargetName="Image" Property="Image.Source" Value="PIC/ButtonImg.png" />
    							</Trigger>
    						</ControlTemplate.Triggers>
    					</ControlTemplate>
    				</Setter.Value>
    			</Setter>
    		</Style>
    	</TabItem.Style>
    </TabItem>

    • Marked as answer by KingWalker Wednesday, November 29, 2017 7:06 AM
    Wednesday, November 29, 2017 6:55 AM
  • You wrap this line in a container
    
    <Image x:Name="Image"/>
    
    E.g:
    
    <Grid>
          <Image x:Name="Image"/>
          <TextBlock Text="Text"/>
    </Grid>

    • Marked as answer by KingWalker Wednesday, November 29, 2017 7:06 AM
    Wednesday, November 29, 2017 7:00 AM

All replies

  • Because TabItem when selected will trigger IsSelected, 
    this time the background color will change
    Your wording is changed to the background color when 
    it was not selected Practice two
    The first one, covering Header content directly
    The first one, covering Header content directly
    
    <TabItem Width="83" Height="55" BorderBrush="{x:Null}" Foreground="White">
    	<TabItem.Header>
    		<Image Width="Auto" Height="Auto" Source="PIC/ButtonImg.png" />
    	</TabItem.Header>
    </TabItem>


    • Marked as answer by KingWalker Wednesday, November 29, 2017 7:06 AM
    Wednesday, November 29, 2017 6:54 AM
  • Second, rewrite Style:
    
    <TabItem Width="83" Height="55" BorderBrush="{x:Null}" Foreground="White">
    	<TabItem.Style>
    		<Style TargetType="{x:Type TabItem}">
    			<Setter Property="Template">
    				<Setter.Value>
    					<ControlTemplate TargetType="{x:Type TabItem}">
    						<Image x:Name="Image"/>
    						<ControlTemplate.Triggers>
    							<Trigger Property="IsSelected" Value="True">
    								<Setter TargetName="Image" Property="Image.Source" Value="PIC/ButtonImg.png" />
    							</Trigger>
    							<Trigger Property="IsSelected" Value="False">
    								<Setter TargetName="Image" Property="Image.Source" Value="PIC/ButtonImg.png" />
    							</Trigger>
    						</ControlTemplate.Triggers>
    					</ControlTemplate>
    				</Setter.Value>
    			</Setter>
    		</Style>
    	</TabItem.Style>
    </TabItem>

    • Marked as answer by KingWalker Wednesday, November 29, 2017 7:06 AM
    Wednesday, November 29, 2017 6:55 AM
  • Thank you for your answer, I used your second method, to achieve the desired effect, but Header above the word will not show Yeah, how can we show? Thank you
    Wednesday, November 29, 2017 6:58 AM
  • You wrap this line in a container
    
    <Image x:Name="Image"/>
    
    E.g:
    
    <Grid>
          <Image x:Name="Image"/>
          <TextBlock Text="Text"/>
    </Grid>

    • Marked as answer by KingWalker Wednesday, November 29, 2017 7:06 AM
    Wednesday, November 29, 2017 7:00 AM