要实现侧边栏宽度的可拖动效果，您可以使用WPF中的Splitter控件。Splitter控件允许用户通过拖动来调整相邻控件的大小。

下面是一个示例，展示如何使用Splitter来实现可拖动的侧边栏宽度：

xaml
Copy code
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/> <!-- 侧边栏 -->
<ColumnDefinition Width="Auto"/> <!-- Splitter -->
<ColumnDefinition Width="*"/> <!-- 内容区域 -->
</Grid.ColumnDefinitions>

<!-- 侧边栏 -->
<StackPanel Grid.Column="0" Background="LightGray">
    <!-- 侧边栏内容 -->
</StackPanel>

<!-- Splitter -->
<GridSplitter Grid.Column="1" Width="5" Background="Gray" HorizontalAlignment="Left"
              DragDelta="Splitter_DragDelta"/>

<!-- 内容区域 -->
<Grid Grid.Column="2" Background="White">
    <!-- 内容区域内容 -->
</Grid>

</Grid>
在上述示例中，我们使用了一个Grid布局来实现侧边栏、Splitter和内容区域的布局。侧边栏放在第一列，Splitter放在第二列，内容区域放在第三列。

关键部分是使用了GridSplitter控件来创建可拖动的Splitter。您可以通过设置GridSplitter的属性来自定义外观，例如设置宽度、背景颜色等。

在Splitter的DragDelta事件处理程序中，您可以根据用户拖动的偏移量来调整侧边栏的宽度。例如，您可以使用Grid的ColumnDefinitions集合中的第一列定义，并设置宽度为新值。

csharp
Copy code
private void Splitter_DragDelta(object sender, System.Windows.Controls.Primitives.DragDeltaEventArgs e)
{
var newWidth = sideBarColumn.ActualWidth + e.HorizontalChange;
if (newWidth > 0)
{
sideBarColumn.Width = new GridLength(newWidth);
}
}
在代码中，我们假设侧边栏所在的列定义为sideBarColumn。在DragDelta事件处理程序中，我们根据用户拖动的偏移量调整侧边栏的宽度，并确保宽度不小于零。

这样，用户就可以通过拖动Splitter来调整侧边栏的宽度，而不再是写死的固定值。

请注意，以上示例中的代码仅演示了基本的实现思路，您可能需要根据自己的实际需求进行调整和优化。